permission 文件 - 后台管理 element-admin 模板 作用-前置路由守卫

import router from "./router";
import { getToken } from "./utils/auth";
import NProgress from "nprogress"; // 引入一份进度条插件
import "nprogress/nprogress.css"; // 引入进度条样式
import store from "./store";

// 全局前置守卫逻辑
router.beforeEach(async (to, from, next) => {
  NProgress.start(); // 开启进度条
  const token = getToken();
  const whiteList = ["/login", "/404"];
  if (token) {
    // 有token
    if (to.path === "/login") {
      // 去系统主页
      next("/");
    } else {
      // 放行  【登录了，有权限去访问系统内界面】
      if (!store.getters.userId) {
        // 发请求获取用户资料
        let { roles } = await store.dispatch("user/getUserProfileAction");
        // 得到了页面权限标识  roles.menus
        // 筛选出属于当前用户的动态路由映射
        let userAsyncRoutes = await store.dispatch(
          "permission/filterRoutes",
          roles.menus
        );
        // 将用户的动态路由映射添加到路由实例中去
        router.addRoutes(userAsyncRoutes);
        // 注意： addRoutes方法是动态添加路由映射，执行这个方法，需要耗时，需要让路由再重新走一次
        next(to.path); //next() 放行  // next(地址)  重新走一次去这个地址
      } else {
        next();
      }
    }
  } else {
    // 没有token
    if (whiteList.includes(to.path)) {
      // 放行
      next();
    } else {
      // 拦截
      next("/login");
    }
  }
  NProgress.done();
});

// 全局后置守卫
router.afterEach(function () {
  NProgress.done(); // 关闭进度条
});