路由白名单

新建 permisssion.js 文件

备注

获取用户信息放在了 permission.js 文件中，因为获取用户信息后，需要根据用户权限动态添加路由，所以放在了 permission.js 文件中

• 在 main.js 中引入permission.js

import router from "@/router";
import { useLoginStore } from "@/stores/login";

// 白名单
const whiteList = ["/login"];
/**
 * 路由前置守卫
 */
router.beforeEach(async (to, from, next) => {
  // 存在 token ，进入主页
  // if (store.state.user.token) {
  // 快捷访问
  if (useLoginStore().token) {
    if (to.path === "/login") {
      next("/admin");
    } else {
      // 判断用户资料是否获取
      // 若不存在用户信息，则需要获取用户信息

      if (!useLoginStore().hasUserInfo) {
        // 触发获取用户信息的 action，并获取用户当前权限
        // const { permission } = await store.dispatch('user/getUserInfo');
        // 这就是获取用户信息
        await useLoginStore().getUserInfo();
        // // 处理用户权限，筛选出需要添加的权限
        // const filterRoutes = await store.dispatch('permission/filterRoutes', permission.menus);
        // console.log(filterRoutes);
        // // 利用 addRoute 循环添加
        // filterRoutes.forEach(item => {
        //     router.addRoute(item);
        // });
        // 添加完动态路由之后，需要在进行一次主动跳转
        return next(to.path);
      }
      next();
    }
  } else {
    // 没有token的情况下，可以进入白名单
    if (whiteList.indexOf(to.path) > -1) {
      next();
    } else {
      next("/login");
    }
  }
});