Vue 鉴权

登录权限： 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>

字段权限：

表格：后端没有返回该字段，则表示无该字段权限，表格不进行列渲染