一文详解vue各种权限控制与管理实现思路

import Vue from 'vue' import VueRouter from 'vue-router' import Layout from '@/layout' import store from '@/store' Vue.use(VueRouter) // 动态路由规则 const tableRule = { path: '/table', name: 'table', component: () => import('@/views/table/index.vue') } const imageRule = { path: '/image', name: 'image', component: () => import('@/views/image') } const userRule = { path: '/users', name: 'users', component: () => import('@/views/users') } // 路由规则和字符串的映射关系 const ruleMapping = { table: tableRule, users: userRule, image: imageRule } //静态路由 const routes = [ { path: '/login', // name: 'login', // 这里如果有name 控制台会提示 component: () => import('@/views/login') }, { path: '/', component: Layout, children: [ { path: '', // name: 'home', component: () => import('@/views/home') }, { path: '/chart', component: () => import('@/views/chart') } ] } ] const router = new VueRouter({ routes }) //路由权限：用户登录后接口返回，存储到本地缓存 const rightList = [ { id: 1, authName: "基本页面", icon: "el-icon-connection", children: [ { id: 11, authName: "表格页面", icon: "el-icon-s-grid", path: "table", rights: ["view", "edit", "add", "delete"] }, { id: 12, authName: "素材页面", icon: "el-icon-s-marketing", path: "image", rights: ["view", "edit", "add", "delete"] } ] }, { id: 2, authName: "用户权限", icon: "el-icon-set-up", children: [ { id: 21, authName: "权限页面", icon: "el-icon-s-custom", path: "users", rights: ["view", "edit", "add", "delete"] } ] } ]; //在登录(login.vue)、页面刷新（App.vue）的时候，调用initDynamicRoutes export function initDynamicRoutes () { // 根据二级权限 对路由规则进行动态的添加 const currentRoutes = router.options.routes rightList.forEach(item => { // 如果是没有子路由的话 就直接添加进去 如果有子路由的话就进入二级权限遍历 if (item.path) { const temp = ruleMapping[item.path] // 路由规则中添加元数据meta temp.meta = item.rights currentRoutes[1].children.push(temp) } item.children.forEach(item => { // item 二级权限 const temp = ruleMapping[item.path] // 路由规则中添加元数据meta，用于按钮权限控制 temp.meta = item.rights currentRoutes[1].children.push(temp) }) }) // 添加路由规则 router.addRoutes(currentRoutes) } export default router 

添加 directives: { // 检测全选的指令 permission: { // 绑定此指令的标签插入到dom节点触发 inserted(el, bind) { // el:绑定该指令标签 // bind:对象格式 当前绑定指令标签上的数据情况 // 获取按钮上的value值，就是用户当前要使用的权限和请求的路由地址 let value = bind.value//['/user','add'] //模拟后端返回的当前角色对应的权限 let rules = { '/menu': ['add', 'edit'], "/user": [ 'edit', 'remove'], "/goods": ['add'] } // 根据访问的路由地址获取该模块的操作权限 let allow = rules[value[0]] // 检测当前操作是否合法 if (!allow.includes(value[1])) { // 不合法隐藏操作按钮 el.style = "display:none" } } } } 

import axios from 'axios' import router from '@/router' const request = axios.create() // 映射 const actionMapping = { get: 'view', post: 'add', put: 'edit', delete: 'delete' } // request.defaults.baseURL = 'http://127.0.0.1:7001' // 注释掉之后调的接口将是Mock数据 // 请求拦截器 request.interceptors.request.use(req => { // console.log(req.url) // console.log(req.method) if (req.url !== '/login' && req.url !== '/roles') { // 不是登录的请求 也不是获取权限的请求 则在请求头中加入token  不知道如何使用Mock来验证请求头中的token 故此处注释 // req.headers.Authorization = sessionStorage.getItem('token') const action = actionMapping[req.method] // 判断非权限范围内的请求 // console.log(router) const currentRight = router.currentRoute.meta // console.log(currentRight) if (currentRight && currentRight.indexOf(action) === -1) { // 没有权限 alert('没有权限') return Promise.reject(new Error('没有权限')) } } return req }) export default request