脚本宝典收集整理的这篇文章主要介绍了vue权限问题，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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<inItem.children.length;i++){
            if(inItem.children[i].meta.show){
              item.redirect=inItem.children[i].path;
              break;
            }
          }
        }
        if(item.children&&inItem.children){
          item.children=filterAsyncRouter(item.children,inItem.children)
        }
        item.meta=inItem.meta;
      }
    })
  })
  return asyncRouter;
}

const user = {
  state: {
    token:'',
    routers: syncRouter,
    addRouters: [],
    limits:[],
  },
  mutations: {
    setToken(state,token){
      state.token=token;
    },
    setAuthInfo(state,theAsyncRouter){
      state.addRouters = theAsyncRouter
      for(let i=0;i<theAsyncRouter.length;i++){
        // syncRouter.push(theAsyncRouter[i]);
        router.options.routes.push(theAsyncRouter[i]);
      }
      router.addRoutes(theAsyncRouter);
      state.routers = syncRouter;
      console.log(state.routers)
    },
    setLimits(state,data){
      state.limits=data;
    }
    
  },
  actions: {
    setToken({ commit }, token) {
      commit('setToken', token)
    },
    //设置获取的权限信息
    setAuthInfo({commit},data){
      console.log(data)
      let theAsyncRouter = filterAsyncRouter(asyncRouter,data)
      commit('setAuthInfo',theAsyncRouter)
    },
    //设置功能权限
    setLimits({commit},data){
      commit('setLimits',data);
    }

  }

}

功能绑定

<el-button type="primary" v-permission="'test'">测试功能显示</el-button>

参考链接：git地址链接

脚本宝典总结

以上是脚本宝典为你收集整理的vue权限问题全部内容，希望文章能够帮你解决vue权限问题所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。