路由的设置:把权限加在了 meta 上,从 router.beforeEch
中进行权限判断。
import Vue from 'vue'
import Router from 'vue-router'
import stores from '../vuex/index'
import user_permissions from "../common/util/user_permissions"
const NoPermission = r => require.ensure([], () => r(require('@/views/NoPermission/NoPermissionPanel.vue')));
const Login = r => require.ensure([], () => r(require('@/views/Login.vue')));
const Home = r => require.ensure([], () => r(require('@/views/layout/Home.vue')));
const OpenApiManager = r => require.ensure([], () => r(require('@/views/openapi/Manager.vue')));
const LogisticsManager = r => require.ensure([], () => r(require('@/views/LogisticsManagement/Manager.vue')));
const LogisticsManager2 = r => require.ensure([], () => r(require('@/views/LogisticsManagement/Manager2.vue')));
const userManager = r => require.ensure([], () => r(require('@/views/userManagement/Manager.vue')));
Vue.use(Router)
export const routes = [
{
path: "/",
hidden: true,
redirect: {
name: "login"
}
},
{
path: "/login",
name: "login",
component: Login,
hidden: true
},
{ path: '*', component: Login },
]
export const asyncRouterMap = [
{
path: "/OpenApi",
name: 'OpenApi',
component: Home,
leaf: true,
meta: {
permissions: ['p_1']
},
children: [
{
path: '/OpenApi/OpenApiManager',
component: OpenApiManager,
name: 'OpenApi',
meta: {
title: "OpenApi",
permissions: ['p_1_1']
}
}
]
},
{
path: "/Logistics",
name: 'Logistics',
component: Home,
leaf: false,
meta: {
permissions: ['p_2']
},
children: [
{
path: '/Logistics/LogisticsManager',
component: LogisticsManager,
name: 'LogisticsManager',
meta: {
title: "LogisticsManager",
permissions: ['p_2_1']
}
},
{
path: '/Logistics/LogisticsManager2',
component: LogisticsManager2,
name: 'LogisticsManager2',
meta: {
title: "LogisticsManager2",
permissions: ['p_2_2']
}
}
]
},
{
path: "/user",
name: '用户管理',
component: Home,
leaf: true,
meta: {
permissions: ['p_3']
},
children: [
{
path: '/user/userManager',
component: userManager,
name: '用户管理',
meta: {
title: "用户管理",
permissions: ['p_3_1']
}
}
]
},
{
path: "/NoPermission",
name: 'NoPermission',
component: Home,
leaf: true,
hidden: true,
meta: {
permissions: ['p_no']
},
children: [
{
path: '/NoPermission/page',
component: NoPermission,
name: 'NoPermission',
meta: {
title: "NoPermission",
permissions: ['p_page']
}
}
]
}
]
const router = new Router({
routes
})
router.addRoutes(asyncRouterMap);
router.beforeEach((to, from, next) => {
let jwtToken = sessionStorage.getItem('jwtToken');
stores.state.jwtToken = jwtToken;
if (!stores.state.jwtToken && to.path !== '/login') {// 判断是否登录
next({
path: '/login',
});
} else {
stores.dispatch('getPermissionList');
const { permissions } = to.meta;
if (permissions) {
// 判断的权限列表
const hasPermission = user_permissions.includePermission(permissions)
console.log(hasPermission);
if (!hasPermission) {
next({
path: '/NoPermission/page',
});
return;
}else{
next()
}
}
next()
}
})
export default router
在vuex中新增获取权限列表方法 getPermissionList
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
list: [],
loginData: {
PermissionList: []
},
jwtToken:'',
isLogin: false
},
mutations: {
updatePermissionList: (state, payload) => {
state.list = payload
},
getList: (state, payload) => {
state.loginData = payload
}
},
actions: {
LoginDataList: async ({ state, commit }) => {
localStorage.removeItem('loginData');
// 发送请求获取权限列表
const data = { PermissionList: ['p_1', 'p_1_1', 'p_2','p_2_2', 'p_3', 'p_3_1','p_no', 'p_page'] };
sessionStorage.setItem("jwtToken", 'jwtToken');
localStorage.setItem('loginData', JSON.stringify(data));
commit('updatePermissionList', data.PermissionList);
},
getPermissionList: async ({ state, commit }) => {
// 防止重复获取
if (state.list.length) return
const list = localStorage.getItem('loginData') != null ? JSON.parse(localStorage.getItem('loginData')).PermissionList : [];
commit('updatePermissionList', list)
}
},
modules: {
}
});
export default store;
添加判断是否拥有权限方法:includePermission
import stores from '../../vuex/index';
export default {
/**
* @param permissions 判断权限列表
*/
includePermission: function (permissions) {
if (!permissions.length) return true
const permissionList:any = stores.state.list;
return !!permissions.find(permission => permissionList.includes(permission))
}
}