怎么根据token的有⽆去控制路由的跳转？进度条跳转 - 白名单是否有token - 单独封装文件permission .js

vue这边的路由⾃带了路由前置守卫，我们可以在前置守卫⾥拿到token数据，然后根据需求做分⽀判 断，要是token存在就使⽤next⽅法正常放⾏跳转，否则可以强制跳回到登录，让⽤户去获取token

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) {
        // 发请求获取用户资料
        await store.dispatch("user/getUserProfileAction");
      }
      next();
    }
  } else {
    // 没有token
    if (whiteList.includes(to.path)) {
      // 放行
      next();
    } else {
      // 拦截
      next("/login");
    }
  }
  NProgress.done();
});

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