前言

需要后端同学配合，不同的用户登录，需要根据用户信息对菜单、按钮等权限进行处理。

1.路由鉴权文件

在src 下新建文件permission.ts 在入口文件main.ts引入并写入以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
//路由鉴权:鉴权,项目当中路由能不能被的权限的设置(某一个路由什么条件下可以访问、什么条件下不可以访问)
import router from '@/router';
//setting 为公共头部文件
import setting from './setting';
import nprogress from 'nprogress';
//引入进度条样式
import "nprogress/nprogress.css";
nprogress.configure({ showSpinner: false });
//获取用户相关的小仓库内部token数据,去判断用户是否登录成功
import useUserStore from './store/modules/user';
import pinia from './store';
let userStore = useUserStore(pinia);
//全局守卫:项目当中任意路由切换都会触发的钩子
//全局前置守卫
router.beforeEach(async (to: any, from: any, next: any) => {
  document.title = `${setting.title} - ${to.meta.title}`
  //to:你将要访问那个路由
  //from:你从来个路由而来
  //next:路由的放行函数
  nprogress.start();
  //获取token,去判断用户登录、还是未登录
  let token = userStore.token;
  //获取用户名字
  let username = userStore.username;
  //用户登录判断
  if (token) {
    //登录成功,访问login,不能访问,指向首页
    if (to.path == '/login') {
      next({ path: '/' })
    } else {
      //登录成功访问其余六个路由(登录排除)
      //有用户信息
      if (username) {
        //放行
        next();
      } else {
        //如果没有用户信息,在守卫这里发请求获取到了用户信息再放行
        try {
          //获取用户信息
          await userStore.userInfo();
          //放行
          //万一:刷新的时候是异步路由,有可能获取到用户信息、异步路由还没有加载完毕,出现空白的效果
          next({ ...to });
        } catch (error) {
          //token过期:获取不到用户信息了
          //用户手动修改本地存储token
          //退出登录->用户相关的数据清空
          await userStore.userLogOut();
          next({ path: '/login', query: { redirect: to.path } })
        }
      }
    }

  } else {
    //用户未登录判断
    if (to.path == '/login') {
      next();
    } else {
      next({ path: '/login', query: { redirect: to.path } });
    }
  }
})
//全局后置守卫
router.afterEach((to: any, from: any) => {
  nprogress.done();
});

2.路由拆分

将路由文件拆分为常量路由、异步路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 常量路由
exprot const constantRoute=[{
    path: '/login',
    component: () => import('@/views/login/login.vue'),
    name: 'Login', // 命名路由
    meta: {
      title: '登录',
      hidden: true,
      icon: ''
    }
  }]

// 异步路由
export const asyncRoute = [
  {
    path: '',
    component: () => import('@/layout/index.vue'),
    name: '',
    meta: {
      title: '',
      icon: ''
   	},
    children:[]
  }

3.通过vue-router插件实现路由配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/** 此文件为路由总文件 index */
import { createRouter, createWebHashHistory } from "vue-router";
import { constantRoute } from "./routes"; // 定义路由的文件
// 创建路由器
let router = createRouter({
  // 模式默认为 hash
  history: createWebHashHistory(),
  routes: constantRoute,
  // 滚动行为
  scrollBehavior() {
    return {
      left: 0,
      top: 0
    }
  }
});

export default router;

4.在用户仓库中获取用户信息并进行处理

4.1 创建用户过滤当前用户需要展示的路由

1
2
3
4
5
6
7
8
9
10
11
function filterAsyncRoute(asyncRoute: any, routes: any) {
  return asyncRoute.filter((item: any) => {
    if (routes.includes(item.name)) {
      if (item.children && item.children.length > 0) {
        item.children = filterAsyncRoute(item.children, routes)
      }
      return true
    }
  })
}

4.2 获取用户信息接口 调用过滤方法展示当前用户需要展示的路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 安装lodash 使用cloneDeep实现深拷贝 不能使用JSON会有问题
import cloneDeep from 'lodash/cloneDeep'
async userInfo() {
  let result: userInfoResponseData = await userInfo();
  if (result.code === 200) {
    //计算当前用户需要展示的异步路由
    let userAsyncRoute = filterAsyncRoute(cloneDeep(asyncRoute), result.data.routes);
    //菜单需要的数据整理完毕
    this.menuRoutes = [...constantRoute, ...userAsyncRoute, ...anyRoute];
    //目前路由器管理的只有常量路由:用户计算完毕异步路由、任意路由动态追加
    [...userAsyncRoute, ...anyRoute].forEach((route: any) => {
      router.addRoute(route);
    });
    return 'Ok'
  } else {
    return Promise.reject(new Error(result.message));
  }
}

4.3 在退出登录时 需要让路由保持常量路由

1
menuRoutes = constantRoute ;

5.关于全局按钮的鉴权

在获取用户信息一并拿到按钮的权限，然后通过自定义指令处理

5.1 用户仓库初始化并获取用户信息

1
2
3
4
5
6
7
8
9
10
11
// 用户仓库初始化
state: (): userState => {
    return {
      buttons: []
    }
  },
 // 获取用户信成功后得到按钮权限信息
  async userInfo() {
    ...
    this.buttons = result.data.buttons;
  }

5.2 src下新建directive文件夹 并新建自定义指令文件并写于以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// src下新建directive文件夹 并新建自定义指令文件并写于以下内容
import pinia from "@/store";
import useUserStroe from "@/store/modules/user";
let userState = useUserStroe(pinia);
export const isHasButton = (app: any) => {
  /** 获取对应的仓库 */
  /** 全局自定义指令 实现按钮权限 */
  app.directive('has', {
    /** 全局指令挂载完毕后执行一次 */
    mounted(el: any, options: any) {
      //自定义指令右侧的数值:如果在用户信息buttons数组当中没有
      //从DOM树上干掉
      if (!userState.buttons.includes(options.value)) {
        el.parentNode.removeChild(el);
      }
    },
  })
}

5.3 在main.ts中引入自定义指令

1
2
3
4
//引入自定义指令
import { isHasButton } from "./directive/has";
const app = createApp(App);
isHasButton(app);

5.4 在页面button按钮处添加以下代码

1
<el-button v-has="`btn.Trademark.add`">添加</el-button>