import Vue from 'vue' import Vuex from 'vuex' import modules from './module' import router, {routes, asyncRouter} from '../router' function hasPermission(route, roles) { if(route.meta && route.meta.roles) { return roles.some(role =>route.meta.roles.indexOf(role) >= 0) } else { return true } } /* 递归过滤异步路由表 返回符合用户角色的路由 @param asyncRouter 异步路由 @param roles 用户角色 */ function filterAsyncRouter(asyncRouter, roles) { let filterRouter = asyncRouter.filter(route =>{ if(hasPermission(route, roles)) { if(route.children && route.children.length) { route.children = filterAsyncRouter(route.children, roles) } return true } return false }) return filterRouter } Vue.use(Vuex) export default new Vuex.Store({ state: { addRouters: [], Routers: [] }, mutations: { getRouter(state, paload) { // console.log(paload) state.Routers = routes.concat(paload) state.addRouters = paload // router.addRoutes(paload) } }, actions: { asyncGetRouter({ commit }, data) { const { roles } = data return new Promise(resolve =>{ let addAsyncRouters = filterAsyncRouter(asyncRouter, roles) commit('getRouter', addAsyncRouters) resolve() }) } } })
到此这篇关于vue中根据用户权限动态添加路由详解的文章就介绍到这了,更多相关vue动态添加路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: