项目需求: 对不同角色做权限管理
效果图如
其中主要是对一下文件进行修改
- src/router
- src/store/modules/permission.js (没有就添加)
- src/store/modules/user.js
- src/store/index
- src/permission.js
那就按照文件修改的文件进行修改了 src/router中代码如下
把需要权限的加在 asyncRoutes 里面
// 这里面放的是国定路由的菜单
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: { title: 'Dashboard', icon: 'dashboard' }
}]
},
]
// 把需要设置权限的理由放在动态路由里那就得写为 其中 meta中的 roles 就是对角色的管理
export const asyncRoutes =[
{
path: '/example',
component: Layout,
redirect: '/example/table',
name: 'Example',
meta: { title: '列子', icon: 'el-icon-s-help', roles:['admin'] },
children: [
{
path: 'table',
name: 'Table',
component: () => import('@/views/table/index'),
meta: { title: '表格', icon: 'table',roles:['admin'] }
},
{
path: 'tree',
name: 'Tree',
component: () => import('@/views/tree/index'),
meta: { title: '树', icon: 'tree',roles:[ 'admin'] }
}
]
},
{
path: '/form',
component: Layout,
children: [
{
path: 'index',
name: 'Form',
component: () => import('@/views/form/index'),
meta: { title: '表单', icon: 'form',roles:['admin'] }
}
]
},
{
path: '/DataScreen',
component: Layout,
children: [
{
path: 'index',
name: 'DataScreen',
component: () => import('@/views/DataScreen/index'),
meta: { title: '可视化', icon: 'form', roles:['admin' , 'editor'] }
}
]
},
{
path: 'external-link',
component: Layout,
children: [
{
path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
meta: { title: 'External Link', icon: 'link',roles:['admin'] }
}
]
},
// 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true }
]
src/store/modules/permission.js (没有就添加) 代码如下
import { asyncRoutes, constantRoutes } from '@/router'
// 筛选路由
// 匹配权限
function hasPermission( roles, route) {
// 在路由上找的到 route.mate 和 route.mate.roles
if (route.meta && route.meta.roles){
return roles.some(role => route.meta.roles.includes(role))
}else{
return true
}
}
// 通过递归过滤异步路由表
export function filterAsyncRoutes( routes, roles){
// 装筛选出来的路由
const res = []
routes.forEach(route =>{
const tmp = { ...route }
if(hasPermission(roles, tmp)){
if(tmp.children){
tmp.children = filterAsyncRoutes(tmp.children, roles)
}
res.push(tmp)
}
})
return res
}
const state = {
routes: [],
addRoutes: []
}
const mutations = {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
state.routes = constantRoutes.concat(routes) // 将过滤的路由和国定的路由存起来
}
}
// 筛选
const actions = {
generateRoutes({ commit }, roles){
return new Promise(resolve =>{
let accessedRoutes
// 路由是否为 admin, 有直接全部显示
if(roles.includes('admin')){
accessedRoutes = asyncRoutes || []
}else{
// 过滤路由
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
}
commit('SET_ROUTES', accessedRoutes)
resolve(accessedRoutes)
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
src/store/modules/user.js 代码如下
const getDefaultState = () => {
return {
token: getToken(),
name: '',
avatar: '',
introduction:'', // 新增
roles:[], // 新增
}
}
const state = getDefaultState()
const mutations = {
RESET_STATE: (state) => {
Object.assign(state, getDefaultState())
},
SET_TOKEN: (state, token) => {
state.token = token
},
// 新增
SET_INTRODUCTION: (state, introduction) => {
state.introduction = introduction
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
// 新增
SET_ROLES: (state, roles) => {
state.roles = roles
}
}
const actions = {
// user login
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password }).then(response => {
const { data } = response
commit('SET_TOKEN', data.token)
setToken(data.token)
resolve()
}).catch(error => {
reject(error)
})
})
},
// get user info // 新增
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
const { data } = response
if (!data) {
return reject('Verification failed, please Login again.')
}
const {roles, name, avatar, introduction } = data
// 必须保证不是一个空的数组
if(!roles || roles.length<=0 ){
reject('getInfo: roles must be a non-null array')
}
console.log(roles)
// 存储值
commit('SET_ROLES', roles)
commit('SET_NAME', name)
commit('SET_AVATAR', avatar)
commit('SET_INTRODUCTION', introduction)
resolve(data)
}).catch(error => {
reject(error)
})
})
},
// user logout
logout({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
// 新增
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
removeToken() // must remove token first
resetRouter()
commit('RESET_STATE')
resolve()
}).catch(error => {
reject(error)
})
})
},
// remove token
resetToken({ commit }) {
return new Promise(resolve => {
// 新增
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
removeToken() // must remove token first
commit('RESET_STATE')
resolve()
})
},
// 改变角色 这个这个方法登录的时候不用 登录成功后切换角色后使用
changeRoles({ commit, dispatch }, roles){
return new Promise(async resolve => {
// 跟换token
const token = role + '-token'
commit('SET_TOKEN', token)
setToken(token)
const { roles } = await dispatch('getInfo'); // 调用文件里的getInfo方法
resetRouter()
// 根据角色生成可访问的路由图
const accessRoutes = await dispatch('permission/generateRoutes', roles, {root: true})
// 动态添加可访问路由
router.addRoutes(accessRoutes)
// 重置已访问视图和缓存视图
dispatch('tagsView/delAllViews', null, {root: true})
resolve()
})
}
}
src/store/index 代码如下
import permission from './modules/permission' // 新增
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app,
settings,
user,
permission // 新增
},
getters
})
src/permission.js 代码如下
if (hasToken) {
if (to.path === '/login') {
// if is logged in, redirect to the home page
next({ path: '/' })
NProgress.done()
} else {
// 修改
// const hasGetUserInfo = store.getters.name
const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (hasRoles) {
next()
} else {
try {
// get user info
// await store.dispatch('user/getInfo')
// 第一步
const { roles } = await store.dispatch('user/getInfo')
// 获取通过权限的路由 第二步
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
// 更新路由 第三步
router.options.routes = store.getters.permission_routes
// 动态添加可访问路由
router.addRoutes(accessRoutes)
console.log(store)
next({...to, replace: true })
} catch (error) {
// remove token and go to login page to re-login
await store.dispatch('user/resetToken')
Message.error(error || '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()
}
}
好了, 按照这个的不出意外的话,你也成功了,有什么不足的话,可评论指定, 谢谢
可以来些免费的 关注和点赞嘛