vue后台_登录权限

• 创建vue实例的时候将vue-router挂载，但这个时候vue-router挂载一些登录或者不用权限的公用的页面。
• 当用户登录后，获取用role，将role和路由表每个页面的需要的权限作比较，生成最终用户可访问的路由表。
• 调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由。
• 使用vuex管理路由表，根据vuex中可访问的路由渲染侧边栏组件。

import Vue from 'vue'
import Router from 'vue-router'
const login = (resolve) => require(['../components/pages/login/login.vue'], resolve);
const home = (resolve) => require(['../components/common/home/home.vue'], resolve);
const basicInfo = (resolve) => require(['../components/pages/basicInfo/basicInfo.vue'], resolve);
const productDayForm = (resolve) => require(['../components/pages/productDayForm/productDayForm.vue'], resolve);
const provinceDayForm = (resolve) => require(['../components/pages/provinceDayForm/provinceDayForm.vue'], resolve);
const productMonthForm = (resolve) => require(['../components/pages/productMonthForm/productMonthForm.vue'], resolve);
const provinceMonthForm = (resolve) => require(['../components/pages/provinceMonthForm/provinceMonthForm.vue'], resolve);
const personCenter = (resolve) => require(['../components/pages/personCenter/personCenter.vue'], resolve);
const userManage = (resolve) => require(['../components/pages/userManage/userManage.vue'], resolve);
// 测试用
const dashboard = (resolve) => require(['../components/pages/dashboard/dashboard.vue'], resolve);
const errorPage = (resolve) => require(['../components/pages/404/404.vue'], resolve);
const passwordReset = (resolve) => require(['../components/pages/passwordReset/passwordReset.vue'], resolve);
const messageTemplate = (resolve) => require(['../components/pages/messageTemplate/messageTemplate.vue'], resolve);
const messageEdit = (resolve) => require(['../components/pages/messageEdit/messageEdit.vue'], resolve);
const messageDetail = (resolve) => require(['../components/pages/messageDetail/messageDetail.vue'], resolve);
const IntelHold = (resolve) => require(['../components/pages/IntelHold/IntelHold.vue'], resolve);
const Test = () => import('../components/pages/Test/Test.vue');
Vue.use(Router)export const constantRouterMap = [{
path: '/login',
component: login,
name: 'login',
meta: {
hidden: true
}
},
{
path: '/resetPassword',
component: passwordReset,
name: 'resetPassword',
meta: {
hidden: true
}
}
];export const asyncRouterMap = [{
path: '/',
component: home,
name: 'root',
redirect: '/static',
meta: {
dropdown: false
},
children: [{
path: 'static',
component: dashboard,
name: 'dashboard',
meta: {
title: '数据统计',
icon: 'icon-attendance'
}
}]
}, {
path: '/dayForm',
component: home,
redirect: '/dayForm/productDayForm',
name: 'dayForm',
meta: {
title: '日报表',
icon: 'icon-calendar',
dropdown: true
},
children: [{
path: 'productDayForm',
component: productDayForm,
name: 'productDayForm',
meta: {
title: '产品日报表'
}
}, {
path: 'provinceDayForm',
component: provinceDayForm,
name: 'provinceDayForm',
meta: {
title: '区域日报表'
}
}]
}, {
path: '/monthForm',
component: home,
redirect: '/monthForm/productMonthForm',
name: 'monthForm',
meta: {
title: '月报表',
icon: 'icon-cangneishicao',
dropdown: true
},
children: [{
path: 'productMonthForm',
component: productMonthForm,
name: 'productMonthForm',
meta: {
title: '产品月报表'
}
}, {
path: 'provinceMonthForm',
component: provinceMonthForm,
name: 'provinceMonthForm',
meta: {
title: '区域月报表'
}
}]
}, {
path: '/detail',
component: home,
redirect: '/detail/basicInfo',
name: 'detail',
meta: {
title: '明细',
icon: 'icon-delivery',
dropdown: true
},
children: [{
path: 'basicInfo',
component: basicInfo,
name: 'basicInfo',
meta: {
title: '基本信息'
}
}]
}, {
path: '/message',
component: home,
redirect: '/message/messageTemplate',
name: 'message',
meta: {
title: '短信维系',
icon: 'icon-chat',
dropdown: true
},
children: [{
path: 'messageTemp',
component: messageTemplate,
name: 'messageTemplate',
meta: {
title: '经典模型'
},
children: [{
path: ':id',
component: messageDetail,
name: 'messageDetail',
meta: {
hidden: true
}
}]
}, {
path: 'messageEdit',
component: messageEdit,
name: 'messageEdit',
meta: {
title: '快速建模'
}
}]
}, {
path: '/',
component: home,
name: 'root',
redirect: '/static',
meta: {
icon: 'el-icon-star-on',
dropdown: false
},
children: [{
path: 'intelHold',
component: IntelHold,
name: 'IntelHold',
meta: {
title: '智慧维系',
icon: 'icon-bank-card'
}
}, {
path: 'userManage',
component: userManage,
name: 'userManage',
meta: {
role: ['admin'],
title: '用户管理',
icon: 'icon-power'
}
}, {
path: 'personCenter',
component: personCenter,
name: 'personCenter',
meta: {
title: '个人中心',
icon: 'icon-user'
}
}, {
path: 'test',
component: Test,
name: 'Test',
meta: {
title: '测试',
icon: 'icon-user'
}
}]
}, {
path: '*',
component: errorPage,
name: '',
meta: {
hidden: true
}
}];
export default new Router({
scrollBehavior: () => ({
y:
}),
routes: constantRouterMap
});

import {
loginByEmail,
logout,
getInfo
} from 'api/login';
import {
getToken,
setToken,
removeToken
} from 'utils/auth';const user = {
state: {
user: '',
status: '',
code: '',
token: getToken(),
name: '',
avatar: '',
introduction: '',
roles: [],
setting: {
articlePlatform: []
}
}, mutations: {
SET_CODE: (state, code) => {
state.code = code;
},
SET_TOKEN: (state, token) => {
state.token = token;
},
SET_INTRODUCTION: (state, introduction) => {
state.introduction = introduction;
},
SET_SETTING: (state, setting) => {
state.setting = setting;
},
SET_STATUS: (state, status) => {
state.status = status;
},
SET_NAME: (state, name) => {
state.name = name;
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar;
},
SET_ROLES: (state, roles) => {
state.roles = roles;
},
LOGIN_SUCCESS: () => {
console.log('login success')
},
LOGOUT_USER: state => {
state.user = '';
}
}, actions: {
// 邮箱登录
LoginByEmail({
commit
}, userInfo) {
const email = userInfo.email.trim();
return new Promise((resolve, reject) => {
loginByEmail(email, userInfo.password).then(response => {
console.log('login response', response);
// debugger
const data = response.data;
setToken(response.data.token);
commit('SET_TOKEN', data.token);
resolve();
}).catch(error => {
reject(error);
});
});
}, // 获取用户信息
GetInfo({
commit,
state
}) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
const data = response.data;
commit('SET_ROLES', data.role);
commit('SET_NAME', data.name);
commit('SET_AVATAR', data.avatar);
commit('SET_INTRODUCTION', data.introduction);
resolve(response);
}).catch(error => {
reject(error);
});
});
}, // 第三方验证登录
LoginByThirdparty({
commit,
state
}, code) {
return new Promise((resolve, reject) => {
commit('SET_CODE', code);
loginByThirdparty(state.status, state.email, state.code).then(response => {
commit('SET_TOKEN', response.data.token);
setToken(response.data.token);
resolve();
}).catch(error => {
reject(error);
});
});
}, // 登出
LogOut({
commit,
state
}) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
commit('SET_TOKEN', '');
commit('SET_ROLES', []);
removeToken();
resolve();
}).catch(error => {
reject(error);
});
});
}, // 前端 登出
FedLogOut({
commit
}) {
return new Promise(resolve => {
commit('SET_TOKEN', '');
removeToken();
resolve();
});
}, // 动态修改权限
ChangeRole({
commit
}, role) {
return new Promise(resolve => {
commit('SET_ROLES', [role]);
commit('SET_TOKEN', role);
setToken(role);
resolve();
})
}
}
};export default user;

import { asyncRouterMap, constantRouterMap } from 'src/router'/**
* 通过meta.role判断是否与当前用户权限匹配
* @param roles
* @param route
*/
function hasPermission(roles, route) {
if (route.meta && route.meta.role) {
return roles.some(role => route.meta.role.indexOf(role) >= )
} else {
return true
}
}/**
* 递归过滤异步路由表，返回符合用户角色权限的路由表
* @param asyncRouterMap
* @param roles
*/
function filterAsyncRouter(asyncRouterMap, roles) {
const accessedRouters = asyncRouterMap.filter(route => {
if (hasPermission(roles, route)) {
if (route.children && route.children.length) {
route.children = filterAsyncRouter(route.children, roles)
}
return true
}
return false
})
return accessedRouters
}const permission = {
state: {
routers: constantRouterMap,
addRouters: []
},
mutations: {
SET_ROUTERS: (state, routers) => {
state.addRouters = routers
state.routers = constantRouterMap.concat(routers)
}
},
actions: {
GenerateRoutes({ commit }, data) {
return new Promise(resolve => {
const { roles } = data
let accessedRouters
if (roles.indexOf('admin') >= ) {
accessedRouters = asyncRouterMap
} else {
accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
}
commit('SET_ROUTERS', accessedRouters);
resolve();
})
}
}
};export default permission;

// permissiom judge
function hasPermission(roles, permissionRoles) {
if (roles.indexOf('admin') >= ) return true; // admin权限 直接通过
if (!permissionRoles) return true;
return roles.some(role => permissionRoles.indexOf(role) >= )
}// register global progress.
const whiteList = ['/login', '/authredirect', '/reset', '/sendpwd'];// 不重定向白名单
router.beforeEach((to, from, next) => {
NProgress.start(); // 开启Progress
if (getToken()) { // 判断是否有token
if (to.path === '/login') {
next({ path: '/' });
} else {
if (store.getters.roles.length === ) { // 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(res => { // 拉取user_info
const roles = res.data.role;
store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
next({ ...to }); // hack方法 addRoutes之后next()可能会失效，因为可能next()的时候add没有完成，可以通过next({...to})此时之前的导航会被放弃，重新发起新的导航，来避免这个问题
})
}).catch(() => {
store.dispatch('FedLogOut').then(() => {
next({ path: '/login' });
})
})
} else {
// 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
if (hasPermission(store.getters.roles, to.meta.role)) {
next();//
} else {
next({ path: '/401', query: { noGoBack: true } });
}
// 可删 ↑
}
}
} else {
if (whiteList.indexOf(to.path) !== -) { // 在免登录白名单，直接进入
next()
} else {
next('/login'); // 否则全部重定向到登录页
NProgress.done(); // 在hash模式下 改变手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！
}
}
});router.afterEach(() => {
NProgress.done(); // 结束Progress
});

const getters = {
sidebar: state => state.app.sidebar,
visitedViews: state => state.app.visitedViews,
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
introduction: state => state.user.introduction,
status: state => state.user.status,
roles: state => state.user.roles,
setting: state => state.user.setting,
permission_routers: state => state.permission.routers,
addRouters: state => state.permission.addRouters
};
export default getters

<template>
<el-menu mode="vertical" theme="dark" unique-opened :default-active="$route.path" :collapse="isCollapse">
<sidebar-item :routes='permission_routers'></sidebar-item>
</el-menu>
</template><script>
import { mapGetters } from 'vuex';
import SidebarItem from './SidebarItem';
export default {
components: { SidebarItem },
computed: {
...mapGetters([
'permission_routers',
'sidebar'
]),
isCollapse() {
return !this.sidebar.opened
}
}
}
</script>

<template>
<div class='menu-wrapper'>
<template v-for="item in routes"> <router-link v-if="!item.hidden&&item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
<el-menu-item :index="item.path+'/'+item.children[0].path" class='submenu-title-noDropdown'>
<icon-svg v-if='item.icon' :icon-class="item.icon"></icon-svg><span slot="title">{{item.children[].name}}</span>
</el-menu-item>
</router-link> <el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
<template slot="title">
<icon-svg v-if='item.icon' :icon-class="item.icon"></icon-svg><span>{{item.name}}</span>
</template>
<template v-for="child in item.children" v-if='!child.hidden'> <sidebar-item class='nest-menu' v-if='child.children&&child.children.length>0' :routes='[child]'> </sidebar-item> <router-link v-else :to="item.path+'/'+child.path">
<el-menu-item :index="item.path+'/'+child.path">
<icon-svg v-if='child.icon' :icon-class="child.icon"></icon-svg><span>{{child.name}}</span>
</el-menu-item>
</router-link> </template> </el-submenu> </template>
</div>
</template><script>
export default {
name: 'SidebarItem',
props: {
routes: {
type: Array
}
}
}
</script><style rel="stylesheet/scss" lang="scss" scoped></style>

import axios from 'axios';
import {
Message
} from 'element-ui';
import store from '../store';
import {
getToken
} from 'utils/auth';// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: // 请求超时时间
});// request拦截器
service.interceptors.request.use(config => {
// Do something before request is sent
if (store.getters.token) {
config.headers['X-Token'] = getToken(); // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
}
return config;
}, error => {
// Do something with request error
console.log(error); // for debug
Promise.reject(error);
})// respone拦截器
service.interceptors.response.use(
response => {
return response;
},
/**
* 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
* 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
*/
// const res = response.data;
// if (res.code !== 20000) {
// Message({
// message: res.message,
// type: 'error',
// duration: 5 * 1000
// });
// // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
// confirmButtonText: '重新登录',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// store.dispatch('FedLogOut').then(() => {
// location.reload();// 为了重新实例化vue-router对象 避免bug
// });
// })
// }
// return Promise.reject(error);
// } else {
// return response.data;
// }
error => {
console.log('err' + error); // for debug
Message({
message: error.message,
type: 'error',
duration: *
});
return Promise.reject(error);
}
)export default service;