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) {
    // 登录了
    if (to.path === "/login") {
      // 登录了而且去的时登录页 多余了
      // 去主系统页面
      next("/");
    } else {
      // 登录了 去的其它页面 放行  有权限访问系统界面
      if (!store.getters.userId) {
        // 触发获取用户资料的接口
        // userId 每一次刷新都是没有的 因为 vuex 的数据刷新就会销毁
        // 但是路由跳转的时候不会重新获取用户资料 因为获取用户这里不是卸载 created 里面了
        await store.dispatch("user/getUserProfileAction");
      }
      next();
    }
  } else {
    // 没有token 没有登录
    if (whiteList.includes(to.path)) {
      // 是白色名单 放行
      next();
    } else {
      // 私密页面 不登录不能看的页面 拦截去登录
      next("/login");
    }
  }
});