广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

本篇文章给大家带来了关于vue的相关知识，其中主要详细介绍了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）的时候，调用initDynamicRoutesexport 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

<el-button v-permission="[$route.path, 'add']">添加</el-button>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

推荐学习：《vue视频教程》

以上就是详解vue各种权限控制与管理的实现思路的详细内容，更多请关注9543建站博客其它相关文章！