首页 > 其他分享 >怎么根据token的有⽆去控制路由的跳转?进度条跳转 - 白名单是否有token - 单独封装文件permission .js

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

时间:2022-11-04 20:44:07浏览次数:52  
标签:进度条 next token 跳转 import store

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

相关文章

  • 若依框架 解决(菜单之间跳转,清除缓存。跳转到子页面在回来,缓存还在问题)
    页面中使用  代码beforeRouteLeave(to,from,next){console.log("to",to);if(to.path=="/conentReview/infoDetailPage/index"){//缓存......
  • cookie、session和token理解
    1.cookieCookie是浏览器在电脑本地保存数据的一种机制,浏览器通过cookie这种机制可以在浏览器上保存用户在浏览器上浏览过的商品,或者在浏览器通过cookie记录一个布尔类型......
  • 场景跳转
    执行方法//引入空间usingUnityEngine.SceneManagement;publicclassScenesJump{//name:要跳转的场景名字publicstaticvoidJump(stringname){......
  • centos 中给mv、cp命令添加进度条
    在centos的使用过程中会遇到复制或移动大文件的情况,但是这种情况下没有一个明确的进度展示总觉得心里没底,所以找了一下相关教程重新打包了mv和cp命令,可以直接下载......
  • vue跳转页面常用的几种方法
    vue跳转页面有好几种不同方法,下面将通过实例代码给大家介绍,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下。1、router-link跳转1.不带参数<router-lin......
  • Android实现页面跳转
    Android实现页面跳转​​MainActivity​​​绑定​​activity_main.xml​​​,​​Main2Activity​​​绑定​​activity_main2.xml​​​,则可以实现从​​activity_main.xml......
  • postman实现一次登录所有接口携带token
    0.问题背景在后端开发过程中,我们需要做接口自测或者问题排查需要使用postman,但是大多数时候我们的系统都是有登录的,这个时候就需要请求携带token,如果每次请求的时候都去......
  • ie浏览器无法跳转想要的页面如何解决 ie浏览器跳转不了界面怎么弄
    https://www.win7zhijia.cn/jiaocheng/win7_37748.html在刚接触新电脑的时候,许多用户都是从系统自带的ie浏览器中来寻找软件的下载地址,这时就需要点击网页中的一些链接来......
  • vue路由页面跳转
    import{useRouter}from'vue-router';exportdefault{setup(){const$router=useRouter();//点击方法functiongo(){$rou......
  • 记录一下实现进度条的方法!(遥感程序设计)
     首先不得不先说到我们最爱的backgroundworker!虽然在抠破头皮也没想出来怎么把程序实际进度返回到进度条,但是在老师的指点下目前还是顺利的换了方法(bushi1、静态处理......