访问main.js 这里调用了权限的js,
免重定向白名单['/login', '/auth-redirect']
每次进入页面时候都回进入到权限的路由拦截器,
点击登录按钮,用dispatch触发'user/login'的action,设置state中的token,设置Cookie中的token
在login文件夹下的index.vue中监听了$route,如果是由登出退到login页面,能获得重定向地址,网址为http://localhost:9528/#/login?redirect=%2Ficon%2Findex,没由重定向地址,跳转到‘/’首页
登录成功后,页面跳转到重定向地址或是首页
在走登录之前,没由hasToken,如果属于免重定向白名单,进入页面,否则到login并带上重定向网址 例如:next(/login?redirect=${to.path}
)
如果登录后,跳转网址是/login,跳转到首页。如果进入其他页 需要通过getInfo获取用户权限
store.getters.roles中是存储的权限
如果store.getters.roles && store.getters.roles.length > 0,说明之前已经调用过getInfo接口,存储过权限 else 通过 store.dispatch('user/getInfo') 拿到权限的接口数据,设置store中user的state中的属性
如果是admin登录roles= ["admin"],如果是editor登录roles= ["editor"],
在需要区分权限的路由配置中,配置了roles,例如:path为/permission,根目录控制admin和editor的权限,子路由,控制了admin的权限。
注: 如果路由配置中不设置roles,则表示此页不需要权限
permission.js中通过dispatch拿到用户权限,再结合路由配置,进行真正路由的生成,再由 router.addRoutes(accessRoutes) 让路由生效
// 设完路由,再次进入一次,设置replace,不留下历史记录
next({ ...to, replace: true })
// 如果getInfo 接口调用失败,通过dispatch('user/resetToken'),清空store中token 和 roles ,cookies中的token也清除,再次进入登录页面并且拼接重定向地址
//退出登录逻辑
store.dispatch('user/logout')
this.{this.$route.fullPath}`)
logout这个action作用,清空token、roles、删除cookies的token, 重置路由resetRouter,作用自己封装
==================================上述是再route中写死的权限配置,还可以通过不同角色,走接口拿到动态路由tree,再拼接路由
===================================扩展 页面权限分类:用户级别权限、页面级别权限、按钮级别权限
用户级别权限:不同的用户,从接口返回不同的动态路由部分
页面级别权限:每个页面路由配置上设置roles:['admin','editor']
按钮级别权限:设置按钮上角色权限,如果该用户属于其中的角色,由按钮,用指令绑定权限。例如:
v-permission="editor"
v-permission="['admin','editor']"
如果不能是用指令的,例如el-tab-pane,可以用v-if绑定函数
按钮级别权限指令代码:
function checkArray(key) {
let arr = ['1', '2', '3', '4']
let index = arr.indexOf(key)
if (index > -1) {
return true // 有权限
} else {
return false // 无权限
}
}
const permission = {
inserted: function (el, binding) {
let permission = binding.value // 获取到 v-permission的值
if (permission) {
let hasPermission = checkArray(permission)
if (!hasPermission) {
// 没有权限 移除Dom元素
el.parentNode && el.parentNode.removeChild(el)
}
}
},
}
export default permission
网友评论