登录权限: beforeEach 前置路由守卫
// 无需令牌白名单
const whiteList = [];
// 全局前置路由守卫:一般用于鉴权
router.beforeEach(async (to, from, next) => {
// 访问⽩名单⻚⾯:放⾏
if (whiteList.includes(to.path)) {
next();
}
// 获取令牌判断用户是否登录
const hasToken = localStorage.getItem("token");
// 未登录访问其他⻚:重定向至登录⻚
if (!hasToken)
next(`/login?redirect=${to.path}`);
}
// 判断动态添加的路由是否丢失,丢失了重新动态添加
// 页面跳转
});
思路:
流程图存放:wps-云文档
扩展:区分静态路由和动态路由
constantRoutes
静态路由:可直接访问,无需判断权限
asyncRoutes
动态路由(权限路由)
- 获取角色,根据角色筛选动态路由
- 获取动态路由数据,生成动态路由
按钮权限:v-directive
定义自定义指令:
// ! 判断当前用户是否有该权限
const permission = {
inserted(el, binding) {
// 获取指令的值:按钮要求的角色数组
const { value: roles } = binding;
console.log('要判断的角色列表:', roles)
if (roles && roles instanceof Array && roles.length > 0) {
const btnPermissionList = [] // 从存储中获取
// 判断是否有按钮要求的角色
const hasPermission = roles.some((role) => btnPermissionList.includes(role));
// 如果没有权限则删除当前dom
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el);
}
} else {
/* eslint-disable */
throw new Error(
`需要指定按钮要求角色数组,如v-permission="['admin','editor']"`
);
}
},
};
export default permission;
注册自定义指令:
import vPermission from "./directives/permission";
// 创建并挂载根实例
const app = createApp(App)
app.directive('permission', vPermission)
app.mount('#app')
使用:
<template>
<div>
<button v-permission="['admin']">admin button</button>
<button v-permission="['editor']">editor button</button>
<button v-permission="['visitor']">visitor button</button>
<button v-permission="['admin', visitor']">admin/visitor button</button>
</div>
</template>
字段权限:
表格:后端没有返回该字段,则表示无该字段权限,表格不进行列渲染