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

功能绑定

    
     测试功能显示
    

参考链接：