forked from AkkomaGang/admin-fe
使用addRoutes重构权限
This commit is contained in:
parent
624af00ba3
commit
faea4d8bf6
10 changed files with 191 additions and 192 deletions
47
src/main.js
47
src/main.js
|
@ -20,7 +20,6 @@ import Sticky from 'components/Sticky'; // 粘性header组件
|
||||||
import vueWaves from './directive/waves';// 水波纹指令
|
import vueWaves from './directive/waves';// 水波纹指令
|
||||||
import errLog from 'store/errLog';// error log组件
|
import errLog from 'store/errLog';// error log组件
|
||||||
import './mock/index.js'; // 该项目所有请求使用mockjs模拟
|
import './mock/index.js'; // 该项目所有请求使用mockjs模拟
|
||||||
import permission from 'store/permission'; // 权限控制
|
|
||||||
|
|
||||||
// register globally
|
// register globally
|
||||||
Vue.component('multiselect', Multiselect);
|
Vue.component('multiselect', Multiselect);
|
||||||
|
@ -36,6 +35,7 @@ Object.keys(filters).forEach(key => {
|
||||||
// permissiom judge
|
// permissiom judge
|
||||||
function hasPermission(roles, permissionRoles) {
|
function hasPermission(roles, permissionRoles) {
|
||||||
if (roles.indexOf('admin') >= 0) return true; // admin权限 直接通过
|
if (roles.indexOf('admin') >= 0) return true; // admin权限 直接通过
|
||||||
|
if (!permissionRoles) return true;
|
||||||
return roles.some(role => permissionRoles.indexOf(role) >= 0)
|
return roles.some(role => permissionRoles.indexOf(role) >= 0)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -47,42 +47,24 @@ router.beforeEach((to, from, next) => {
|
||||||
if (to.path === '/login') {
|
if (to.path === '/login') {
|
||||||
next({ path: '/' });
|
next({ path: '/' });
|
||||||
} else {
|
} else {
|
||||||
if (to.meta && to.meta.role) { // 判断即将进入的页面是否需要权限
|
if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完info信息
|
||||||
if (store.getters.roles.length !== 0) { // 判断当前用户是否已拉取完info信息
|
store.dispatch('GetInfo').then(res => { // 拉取info
|
||||||
if (hasPermission(store.getters.roles, to.meta.role)) { // 判断权限
|
const roles = res.data.role;
|
||||||
next(); // 有权限
|
store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
|
||||||
} else {
|
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
|
||||||
next({ path: '/401', query: { noGoBack: true } }); // 无权限
|
next(to); // hack方法 确保addRoutes已完成
|
||||||
}
|
})
|
||||||
} else { // 未拉取info信息
|
|
||||||
store.dispatch('GetInfo').then(() => { // 拉取info
|
|
||||||
permission.init({ // 初始化权限
|
|
||||||
roles: store.getters.roles,
|
|
||||||
router: router.options.routes
|
|
||||||
});
|
|
||||||
if (hasPermission(store.getters.roles, to.meta.role)) { // 判断权限
|
|
||||||
next();// 有权限
|
|
||||||
} else {
|
|
||||||
next({ path: '/401', query: { noGoBack: true } }); // 无权限
|
|
||||||
}
|
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
});
|
});
|
||||||
}
|
|
||||||
} else { // 页面不需要权限 直接进入
|
|
||||||
if (store.getters.roles.length !== 0) {
|
|
||||||
next();
|
|
||||||
} else {
|
} else {
|
||||||
store.dispatch('GetInfo').then(() => {
|
// 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
|
||||||
permission.init({
|
if (hasPermission(store.getters.roles, to.meta.role)) {
|
||||||
roles: store.getters.roles,
|
next();//
|
||||||
router: router.options.routes
|
} else {
|
||||||
});
|
next({ path: '/401', query: { noGoBack: true } });
|
||||||
next();
|
|
||||||
}).catch(err => {
|
|
||||||
console.log(err);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
// 可删 ↑
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
@ -95,6 +77,7 @@ router.beforeEach((to, from, next) => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
router.afterEach(() => {
|
router.afterEach(() => {
|
||||||
NProgress.done(); // 结束Progress
|
NProgress.done(); // 结束Progress
|
||||||
});
|
});
|
||||||
|
|
|
@ -70,10 +70,8 @@ Vue.use(Router);
|
||||||
* noDropdown : if noDropdown:true will not has submenu
|
* noDropdown : if noDropdown:true will not has submenu
|
||||||
* meta : { role: ['admin'] } will control the page role
|
* meta : { role: ['admin'] } will control the page role
|
||||||
*/
|
*/
|
||||||
export default new Router({
|
|
||||||
// mode: 'history', //后端支持可开
|
export const constantRouterMap = [
|
||||||
scrollBehavior: () => ({ y: 0 }),
|
|
||||||
routes: [
|
|
||||||
{ path: '/login', component: Login, hidden: true },
|
{ path: '/login', component: Login, hidden: true },
|
||||||
{ path: '/authredirect', component: authRedirect, hidden: true },
|
{ path: '/authredirect', component: authRedirect, hidden: true },
|
||||||
{ path: '/sendpwd', component: sendPWD, hidden: true },
|
{ path: '/sendpwd', component: sendPWD, hidden: true },
|
||||||
|
@ -95,7 +93,16 @@ export default new Router({
|
||||||
icon: 'xinrenzhinan',
|
icon: 'xinrenzhinan',
|
||||||
noDropdown: true,
|
noDropdown: true,
|
||||||
children: [{ path: 'index', component: Introduction, name: '简述' }]
|
children: [{ path: 'index', component: Introduction, name: '简述' }]
|
||||||
},
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default new Router({
|
||||||
|
// mode: 'history', //后端支持可开
|
||||||
|
scrollBehavior: () => ({ y: 0 }),
|
||||||
|
routes: constantRouterMap
|
||||||
|
});
|
||||||
|
|
||||||
|
export const asyncRouterMap = [
|
||||||
{
|
{
|
||||||
path: '/permission',
|
path: '/permission',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
|
@ -192,7 +199,5 @@ export default new Router({
|
||||||
{ path: 'form1', component: Form1, name: '综合form1' }
|
{ path: 'form1', component: Form1, name: '综合form1' }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
{ path: '*', redirect: '/404', hidden: true }
|
{ path: '*', redirect: '/404', hidden: true }
|
||||||
]
|
];
|
||||||
});
|
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
const getters = {
|
const getters = {
|
||||||
sidebar: state => state.app.sidebar,
|
sidebar: state => state.app.sidebar,
|
||||||
livenewsChannels: state => state.app.livenewsChannels,
|
|
||||||
token: state => state.user.token,
|
token: state => state.user.token,
|
||||||
avatar: state => state.user.avatar,
|
avatar: state => state.user.avatar,
|
||||||
name: state => state.user.name,
|
name: state => state.user.name,
|
||||||
|
@ -10,6 +9,8 @@ const getters = {
|
||||||
auth_type: state => state.user.auth_type,
|
auth_type: state => state.user.auth_type,
|
||||||
status: state => state.user.status,
|
status: state => state.user.status,
|
||||||
roles: state => state.user.roles,
|
roles: state => state.user.roles,
|
||||||
setting: state => state.user.setting
|
setting: state => state.user.setting,
|
||||||
|
permission_routers: state => state.permission.routers,
|
||||||
|
addRouters: state => state.permission.addRouters
|
||||||
};
|
};
|
||||||
export default getters
|
export default getters
|
||||||
|
|
|
@ -2,6 +2,7 @@ import Vue from 'vue';
|
||||||
import Vuex from 'vuex';
|
import Vuex from 'vuex';
|
||||||
import app from './modules/app';
|
import app from './modules/app';
|
||||||
import user from './modules/user';
|
import user from './modules/user';
|
||||||
|
import permission from './modules/permission';
|
||||||
import getters from './getters';
|
import getters from './getters';
|
||||||
|
|
||||||
Vue.use(Vuex);
|
Vue.use(Vuex);
|
||||||
|
@ -9,7 +10,8 @@ Vue.use(Vuex);
|
||||||
const store = new Vuex.Store({
|
const store = new Vuex.Store({
|
||||||
modules: {
|
modules: {
|
||||||
app,
|
app,
|
||||||
user
|
user,
|
||||||
|
permission
|
||||||
},
|
},
|
||||||
getters
|
getters
|
||||||
});
|
});
|
||||||
|
|
|
@ -16,21 +16,11 @@ const app = {
|
||||||
Cookies.set('sidebarStatus', 0);
|
Cookies.set('sidebarStatus', 0);
|
||||||
}
|
}
|
||||||
state.sidebar.opened = !state.sidebar.opened;
|
state.sidebar.opened = !state.sidebar.opened;
|
||||||
},
|
|
||||||
SET_LIVENEWS_CHANNELS: (status, channels) => {
|
|
||||||
status.livenewsChannels = JSON.stringify(channels);
|
|
||||||
Cookies.set('livenewsChannels', JSON.stringify(channels));
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
ToggleSideBar: ({ commit }) => {
|
ToggleSideBar: ({ commit }) => {
|
||||||
commit('TOGGLE_SIDEBAR')
|
commit('TOGGLE_SIDEBAR')
|
||||||
},
|
|
||||||
setTheme: ({ commit }, theme) => {
|
|
||||||
commit('SET_THEME', theme)
|
|
||||||
},
|
|
||||||
setlivenewsChannels: ({ commit }, channels) => {
|
|
||||||
commit('SET_LIVENEWS_CHANNELS', channels)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
51
src/store/modules/permission.js
Normal file
51
src/store/modules/permission.js
Normal file
|
@ -0,0 +1,51 @@
|
||||||
|
import { asyncRouterMap, constantRouterMap } from 'src/router';
|
||||||
|
|
||||||
|
function hasPermission(roles, route) {
|
||||||
|
if (route.meta && route.meta.role) {
|
||||||
|
return roles.some(role => route.meta.role.indexOf(role) >= 0)
|
||||||
|
} else {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const permission = {
|
||||||
|
state: {
|
||||||
|
routers: constantRouterMap,
|
||||||
|
addRouters: []
|
||||||
|
},
|
||||||
|
|
||||||
|
mutations: {
|
||||||
|
SET_ROUTERS: (state, routers) => {
|
||||||
|
state.addRouters = routers;
|
||||||
|
state.routers = constantRouterMap.concat(routers);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
// s
|
||||||
|
GenerateRoutes({ commit }, data) {
|
||||||
|
const { roles } = data;
|
||||||
|
const accessedRouters = asyncRouterMap.filter(v => {
|
||||||
|
if (roles.indexOf('admin') >= 0) return true;
|
||||||
|
if (hasPermission(roles, v)) {
|
||||||
|
if (v.children && v.children.length > 0) {
|
||||||
|
v.children = v.children.filter(child => {
|
||||||
|
if (hasPermission(roles, child)) {
|
||||||
|
return child
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
return v
|
||||||
|
} else {
|
||||||
|
return v
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
commit('SET_ROUTERS', accessedRouters);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export default permission;
|
|
@ -1,38 +0,0 @@
|
||||||
const permission = {
|
|
||||||
state: {
|
|
||||||
permissionRoutes: []
|
|
||||||
},
|
|
||||||
init(data) {
|
|
||||||
const { roles, router } = data;
|
|
||||||
const permissionRoutes = router.filter(v => {
|
|
||||||
if (roles.indexOf('admin') >= 0) return true;
|
|
||||||
if (this.hasPermission(roles, v)) {
|
|
||||||
if (v.children && v.children.length > 0) {
|
|
||||||
v.children = v.children.filter(child => {
|
|
||||||
if (this.hasPermission(roles, child)) {
|
|
||||||
return child
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
return v
|
|
||||||
} else {
|
|
||||||
return v
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
this.state.permissionRoutes = permissionRoutes;
|
|
||||||
},
|
|
||||||
get() {
|
|
||||||
return this.state.permissionRoutes
|
|
||||||
},
|
|
||||||
hasPermission(roles, route) {
|
|
||||||
if (route.meta && route.meta.role) {
|
|
||||||
return roles.some(role => route.meta.role.indexOf(role) >= 0)
|
|
||||||
} else {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default permission;
|
|
|
@ -28,4 +28,8 @@
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.errPage-container{
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -26,7 +26,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapGetters } from 'vuex'
|
import { mapGetters } from 'vuex';
|
||||||
import Levelbar from './Levelbar';
|
import Levelbar from './Levelbar';
|
||||||
import Hamburger from 'components/Hamburger';
|
import Hamburger from 'components/Hamburger';
|
||||||
import ErrLog from 'components/ErrLog';
|
import ErrLog from 'components/ErrLog';
|
||||||
|
@ -56,7 +56,7 @@
|
||||||
},
|
},
|
||||||
logout() {
|
logout() {
|
||||||
this.$store.dispatch('LogOut').then(() => {
|
this.$store.dispatch('LogOut').then(() => {
|
||||||
this.$router.push({ path: '/login' })
|
location.reload();// 为了重新实例化vue-router对象 避免bug
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<el-menu :unique-opened='true' mode="vertical" theme="dark" :default-active="$route.path">
|
<el-menu :unique-opened='true' mode="vertical" theme="dark" :default-active="$route.path">
|
||||||
<template v-for="item in permissionRoutes" v-if="!item.hidden">
|
<template v-for="item in permission_routers" v-if="!item.hidden">
|
||||||
<el-submenu :index="item.name" v-if="!item.noDropdown">
|
<el-submenu :index="item.name" v-if="!item.noDropdown">
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
<wscn-icon-svg :icon-class="item.icon||'wenzhang1'" /> {{item.name}}
|
<wscn-icon-svg :icon-class="item.icon||'wenzhang1'" /> {{item.name}}
|
||||||
|
@ -21,13 +21,14 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import permissionRoutes from 'store/permission';
|
import { mapGetters } from 'vuex';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Sidebar',
|
name: 'Sidebar',
|
||||||
data() {
|
computed: {
|
||||||
return {
|
...mapGetters([
|
||||||
permissionRoutes: permissionRoutes.get()
|
'permission_routers'
|
||||||
}
|
])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue