vue权限问题

AaronYuan 发布于2019-08-26 13:30 / 1906人阅读

摘要：控制权限问题后台返回的接口首页关于测试更多更多一更多二权限指令功能权限指令操作权限递归过滤异步路由表，返回符合用户角色权限的路由表设置获取的权限信息设置功能权限功能绑定测试功能显示参考链接地址链接

vue控制权限问题 后台返回的接口

{
  "code": 200,
  "data": [{
      path: "/",
      meta: {
        title: "首页",
        show: true,
        limits: ["test"],
      },
    },
    {
      path: "/about",
      meta: {
        title: "关于",
        show: false
      },
    },
    {
      path: "/test",
      meta: {
        title: "测试",
        show: true,
      },
    },
    {
      path: "/more",
      meta: {
        title: "更多",
        show: true
      },
      children: [{
          path: "/more/navone",
          meta: {
            title: "更多一",
            show: false
          },
        },
        {
          path: "/more/navtwo",
          meta: {
            title: "更多二",
            show: true
          },
        }
      ]
    }
  ]
}

权限指令

import Vue from "vue";
import store from "@/store/index"
 
// v-permission: 功能权限指令
Vue.directive("permission", {
    bind(el, binding, vnode, oldVnode) {
        const { value } = binding
        const limits = store.getters && store.getters.limits
        if (value) {
            const permissionRoles = value
            const hasPermission = limits.some(limit => {
                return permissionRoles==limit
            })
            if (!hasPermission) {
                el.parentNode && el.parentNode.removeChild(el)
            }
        } else {
            throw new Error(`need limits! Like v-permission=""test""`)
        } 
    }
})

vuex操作权限

import {syncRouter, asyncRouter,router } from "@/router/index"
/**
 * 递归过滤异步路由表，返回符合用户角色权限的路由表
 * @param asyncRouterMap
 * @param roles
 */
function filterAsyncRouter(asyncRouter, roles) {
  asyncRouter.map((item)=>{
    roles.forEach((inItem)=>{
      if(item.path==inItem.path){
        if(item.redirect){
          for(let i=0;i
功能绑定
测试功能显示

参考链接：git地址链接

混合云 idc机房托管 jira权限问题 asp 权限问题阿里云服务器权限问题 Vue_Vue

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108959.html

sSpring Boot多模块+ Shiro + Vue：前后端分离登陆整合，权限认证（一）

摘要：前言本文主要使用来实现前后端分离的认证登陆和权限管理，适合和我一样刚开始接触前后端完全分离项目的同学，但是你必须自己搭建过前端项目和后端项目，本文主要是介绍他们之间的互通，如果不知道这么搭建前端项目的同学可以先找别的看一下。前言本文主要使用spring boot + shiro + vue来实现前后端分离的认证登陆和权限管理，适合和我一样刚开始接触前后端完全分离项目的同学，但是你必...

macg0406 2019-08-19 11:38 评论0 收藏0
手摸手，带你用vue撸后台系列二(登录权限篇)

摘要：我们将登录按钮上绑上事件，点击登录之后向服务端提交账号和密码进行验证。所以前端和后端权限的划分是不太一致。侧边栏最后一个涉及到权限的地方就是侧边栏，不过在前完整项目地址：vue-element-admin 系列文章：手摸手，带你用vue撸后台系列一（基础篇）手摸手，带你用vue撸后台系列二(登录权限篇) 手摸手，带你用vue撸后台系列三 (实战篇) 手摸手，带你用vu...

不知名网友 2019-08-20 16:45 评论0 收藏0
20180308_vue-router前端权限控制问题

vue-router前端权限控制问题前提纲要：1.用户A和用户B有不同的权限。页面分左侧菜单部分和右侧内容部分，右侧内容可能有不同路径的不同内容最简单例子为点击左侧用户管理右侧显示用户列表点击某条内容详情右侧显示某一用户的详细内容 2.用户A可以访问路径权限如下： a/list a/detail/:id a/list/:id 用户B可以访问路径权限如下： ...

阿罗 2019-08-22 15:13 评论0 收藏0
vue权限管理系统

摘要：权限系统后台管理系统一般都会有权限模块，用来控制用户能访问哪些页面和哪些数据接口。大多数管理系统的页面都长这样。表为角色权限关联表，一个角色拥有哪些权限是通过这张表查出来的。这样就是一个账号角色权限的关系。 vue权限系统后台管理系统一般都会有权限模块，用来控制用户能访问哪些页面和哪些数据接口。大多数管理系统的页面都长这样。 showImg(https://segmentfault...

bovenson 2019-08-23 14:46 评论0 收藏0
vue vuex vue-rouert后台项目——权限路由（超详细简单版）

摘要：可以配合相关的官方文档学习。上面的内容说的重点，其实也算是项目的全部啦项目地址感觉还不错的话就请给个吧谢谢有什么问题欢迎提问项目地址：vue-simple-template共三个角色：adan barbara carrie 密码全是：123456 adan 拥有最高权限A 他可以看到 red , yellow 和 blue 页面（共三个页面）barbara 拥有权限B 他可以看到...

olle 2019-08-21 18:29 评论0 收藏0