vue-admin-template 角色权限设置（2）
在 vue-admin-template 角色权限设置（1）中提到了如何根据用户角色进行访问控制
但在项目实际使用过程中发现了一些存在的问题，下面主要针对这些存在的问题进行修改和完善
一、页面刷新后发现头像等个人信息消失
- 原因：在页面登录成功后，项目是通过 getInfo 方法获取个人信息存储在 vuex 中使用的，但是在页面刷新后，vuex 中的数据会丢失。这是因为 js 代码是运行在内存中的，代码运行时的所有变量、函数也都是保存在内存中的。进行刷新页面的操作，以前申请的内存被释放，重新加载脚本代码，变量重新赋值，所以这些数据要想存储就必须存储在外部。
- 解决方法：获取数据后在 Storage 中保存一份，这里采用 localStorage
- 需要注意的是：尽量不要在 localStorage 中存储过大的数据，否则会影响页面加载性能。
import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'
const getDefaultState = () => {
return {
// 利用localStorage保证刷新后仍存在
token: getToken(),
name: localStorage.getItem('name') ? JSON.parse(localStorage.getItem('name')) : '',
avatar: localStorage.getItem('avatar') ? JSON.parse(localStorage.getItem('avatar')) : '',
roles: localStorage.getItem('roles') ? JSON.parse(localStorage.getItem('roles')) : []
}
}
const state = getDefaultState()
const mutations = {
RESET_STATE: (state) => {
Object.assign(state, getDefaultState())
},
SET_TOKEN: (state, token) => {
state.token = token
},
SET_NAME: (state, name) => {
state.name = name
},
SET_ROLES: (state, roles) => {
state.roles = roles
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
}
}
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('验证失败，请重新登录！')
}
const { name, roles, avatar } = data
// 将个人信息备份在 localStorage 中
localStorage.setItem('roles', JSON.stringify(roles))
localStorage.setItem('roles', JSON.stringify(roles))
localStorage.setItem('avatar', JSON.stringify(avatar))
if (!roles || roles.length <= 0) {
reject('您不是有效的身份！')
}
// 将页面级的操作权限存在 localStorage 里
if (roles.includes('店长')) {
localStorage.setItem('permissions', JSON.stringify(['add', 'editAndDelete']));
} else if (roles.includes('收银员') || roles.includes('技师') || roles.includes('发型师')) {
localStorage.setItem('permissions', JSON.stringify([]));
}
commit('SET_NAME', name)
commit('SET_ROLES', roles)
commit('SET_AVATAR', avatar)
resolve(data)
}).catch(error => {
reject(error)
})
})
},
// user logout
logout({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
removeToken() // must remove token first
resetRouter()
// 记得清除
localStorage.removeItem('permissions')
localStorage.removeItem('name')
localStorage.removeItem('roles')
localStorage.removeItem('avatar')
commit('RESET_STATE')
resolve()
}).catch(error => {
reject(error)
})
})
},
// remove token
resetToken({ commit }) {
return new Promise(resolve => {
removeToken() // must remove token first
// 记得清除
localStorage.removeItem('permissions')
localStorage.removeItem('name')
localStorage.removeItem('roles')
localStorage.removeItem('avatar')
commit('RESET_STATE')
resolve()
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
这样在刷新之后 vuex 中的值仍存在~
二、页面刷新后动态路由失效跳转 /404 页面的问题
- 原因：一方面是刷新后相应的 vuex 存在的值失效，另一方面是即使值仍有效，但是 addRoutes 动态添加路由还没完成，页面就从静态找了，导致一直跳转 404。
- 解决方法：可以把 routes 存在 localStorage 中，这里因为之前把 roles 持久了，可以直接在路由前置守卫中对刷新这种情况进行特殊处理，主要思想是当动态路由表添加进去路由以后，再将 404 路由也动态添加进去！
- 需要注意的是：多次调用 router.addRoutes 方法，会重复添加路由并警告路由名字重复，可以重新封装一个方法。
- 在 router/index.js 中重新封装 addRoutes 方法
// 解决路由命名重复的问题
router.$addRoutes = params => {
router.matcher = new Router({
routes: router.options.routes
// 关键代码
}).matcher;
router.addRoutes(params);
};
- 删除 router/index.js 静态路由中的用 * 来找 404
{ path: '*', redirect: '/404', hidden: true }
- 在 src/permission.js 中对刷新情况单独处理
router.beforeEach(async (to, from, next) => {
// start progress bar
NProgress.start()
// set page title
document.title = getPageTitle(to.meta.title)
// determine whether the user has logged in
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
// if is logged in, redirect to the home page
next({ path: '/' })
NProgress.done()
} else {
// 在 addRoutes() 之后第一次访问被添加的路由会白屏，这是因为刚刚 addRoutes() 就立刻访问被添加的路由
// 然而此时 addRoutes() 没有执行结束，因而找不到刚刚被添加的路由导致白屏。因此需要从新访问一次路由才行。
// 此时就要使用 next({ …to, replace: true }) 来确保 addRoutes() 时动态添加的路由已经被完全加载上去。
// next({ …to, replace: true }) 中的 replace: true 只是一个设置信息，告诉 VUE 本次操作后，不能通过浏览器后退按钮，返回前一个路由。
// 通过 getInfo 判断用户是否获得了权限角色
const hasRoles = store.getters.roles && store.getters.roles.length > 0;
if (hasRoles) {
// 如果是刷新
if (store.state.permission.routes.length == 0) {
// 根据角色生成可访问的路由
const accessRoutess = await store.dispatch('permission/generateRoutes', store.getters.roles);
// 动态添加路由
router.$addRoutes(accessRoutess);
// 404 页面重定向必须放在最后面！否则一刷新和输入地址 就出问题跳 404 页面！
// 因为addRoutes动态添加路由还没完成，页面就从静态找了。
// 解决：当动态路由表添加进去路由以后，再将 404 路由也动态添加进去！
router.options.routes.push({ path: '*', redirect: '/404', hidden: true })
console.log(router.options.routes)
next({ ...to, replace: true });
} else {
next()
}
} else {
try {
// get user info
// 注意：roles 必须是数组形式，如 ['admin'] or ,['developer','editor']
const { roles } = await store.dispatch('user/getInfo')
// 根据角色生成可访问的路由
const accessRoutes = await store.dispatch('permission/generateRoutes', roles);
// 动态添加路由
router.$addRoutes(accessRoutes);
// 404 页面重定向必须放在最后面！否则一刷新和输入地址 就出问题跳 404 页面！
// 因为addRoutes动态添加路由还没完成，页面就从静态找了。
// 解决：当动态路由表添加进去路由以后，再将 404 路由也动态添加进去！
router.options.routes.push({ path: '*', redirect: '/404', hidden: true })
// 确保 addRoutes 完成
// 设置替换为 true 这样导航不会留下历史记录
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()
}
}
})
至此再刷新发现没有问题啦！！The end.
