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(); // 关闭进度条 });
标签:进度条,next,token,跳转,import,store From: https://www.cnblogs.com/zhulongxu/p/16859063.html