src/store/modules/permission.js
src/layout/components/Sidebar/index.vue
一、登录
login.vue
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
// 将username和password派发到该方法中
this.$store.dispatch('user/login', this.loginForm)
.then(() => {
// 登录成功,跳转至首页
this.$router.push({ path: '/' })
})
.catch(() => {
this.loading = false
})
} else {
console.log('error submit!!')
return false
}
})
}
src/store/modules/user.js
const actions = {
// user login
login({ commit }, userInfo) {
// 根据页面递来的数据
const { username, password } = userInfo
return new Promise((resolve, reject) => {
// api/user
// 连接后端接口,根据前端请求的用户信息,后端返回唯一对应的随机token
login({ username: username.trim(), password: password }).then(response => {
const { data } = response
// commit会触发mutations,存储token
commit('SET_TOKEN', data.token)
setToken(data.token)
resolve()
}).catch(error => {
reject(error)
})
})
}
}
二、权限路由
src/permission.js
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'
NProgress.configure({ showSpinner: false }) // NProgress Configuration
const whiteList = ['/login'] // 白名单
//全局前置路由,若无next()则不会进行下一步骤
//在每个路由跳转前都会执行该方法
router.beforeEach(async(to, from, next) => {
// start progress bar
NProgress.start()
// set page title
document.title = getPageTitle(to.meta.title)
// 根据是否存在token,判断是否登录
const hasToken = getToken()
// 若token存在,则该用户已登录
if (hasToken) {
if (to.path === '/login') {
// 若此时页面在登录页面,则跳转至首页
next({ path: '/' })
NProgress.done()
} else {
// 若此时不在登录页面,则获取用户角色权限,判断所在页面该用户是否能进入
const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (hasRoles) {
next()
} else {
try {
// 若该用户之前未存储角色权限在store中,则前往store目录下的该路径,根据store存储过的token,获取并存储该用户的角色权限
const { roles } = await store.dispatch('user/getInfo')
// 将角色权限派发到该路径下
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
// 生成动态路由
router.addRoutes(accessRoutes)
// 再重新返回判断角色权限是否存在,进行下一步骤
next({ ...to, replace: true })
} catch (error) {
// remove token and go to login page to re-login
await store.dispatch('user/resetToken')
//这里会报个参数类型异常,所以将参数 由error 改为了 error.message
Message.error(error.message || 'Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next()
} else {
// other pages that do not have permission to access are redirected to the login page.
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
router.afterEach(() => {
// finish progress bar
NProgress.done()
})
src/store/modules/user.js
const actions = {
// get user info
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
// 连接后端接口,根据token数据,后端返回对应的用户信息,如角色权限roles
getInfo(state.token).then(response => {
const { data } = response
if (!data) {
return reject('Verification failed, please Login again.')
}
const { name, avatar, roles } = data
// 存储用户信息,方便用于全局
commit('SET_NAME', name)
commit('SET_AVATAR', avatar)
commit('SET_ROLES', roles)
resolve(data)
}).catch(error => {
reject(error)
})
})
}
}
src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
/**
* constantRoutes全局路由
* a base page that does not have permission requirements
* all roles can be accessed
*/
export const constantRoutes = [
{
path: '/login',
//@表示在src文件夹下
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/',
component: Layout,
//当用户跳转到/时,自动跳转其子路由/home
redirect: '/dashboard',
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: { title: '首页', icon: 'el-icon-s-home' }
}]
},
]
//用户有特定权限才能访问
export const asyncRoutes = [
{//侧边栏为超级管理员
path: '/admin',
component: Layout,
redirect: '/admin/user',
children: [{
path: 'user',
name: 'user_manage',
component: () => import('@/views/admin/list'),
meta: {
title: '用户管理',
icon: 'el-icon-user',
roles: ['admin']
}
}]
},
{//侧边栏为官方用户路由
path: '/goods',
component: Layout,
name: 'goods_manage',
meta: {
title: '商品管理',
icon: 'el-icon-s-order',
roles: ['business']
},
children: [
{
path: 'list',
name: 'goods_list',
component: () => import('@/views/goods/list'),
meta: { title: '商品列表', icon: 'el-icon-document', roles: ['business'] }
},
{
path: 'create',
name: 'create',
component: () => import('@/views/goods/create'),
meta: { title: '商品创建', icon: 'el-icon-document-add', roles: ['business'] }
},
{
path: 'edit/:id(\\d+)',
component: () => import('@/views/goods/edit'),
name: 'edit',
meta: { title: '商品编辑', noCache: true, activeMenu: '/goods/list', roles: ['business']},
hidden: true
},
]
},
{//侧边栏为商家
path: '/orders',
component: Layout,
redirect: '/orders/list',
children: [{
path: 'list',
name: 'orders_manage',
component: () => import('@/views/orders/list'),
meta: {
title: '订单管理',
icon: 'el-icon-download',
roles: ['business']
}
}]
},
// 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true }
]
const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
const router = createRouter()
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
export default router
src/store/modules/permission.js
const actions = {
generateRoutes({ commit }, roles) {
return new Promise(resolve => {
let accessedRoutes
// 这里写自己的拦截逻辑
// 通过所属的角色去过滤路由,生成新的路由表
if (roles.includes('admin')) {
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
} else if(roles.includes('business')){
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
}
// 存储路由表
commit('SET_ROUTES', accessedRoutes)
resolve(accessedRoutes)
})
}
}
src/store/getters.js
// 存储用于全局
roles: state =>state.user.roles,
permission_routes: state=>state.permission.routes
src/layout/components/Sidebar/index.vue
<!--根据角色权限路由表遍历菜单-->
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
export default {
components: { SidebarItem },
computed: {
...mapGetters([
// 获取全局中存储的被角色权限过滤过的路由表
'permission_routes'
]),
}
}
</script>