路由导航守卫

Sample_浅浅未央

已于 2024-03-12 10:50:12 修改

阅读量40

点赞数

文章标签： html5

于 2023-11-21 15:00:16 首次发布

本文链接：https://blog.csdn.net/u010822903/article/details/134532323

版权

本文介绍了如何在Vue项目中使用全局前置守卫实现用户登录状态检查，当Token失效时自动跳转到登录页面。作者在main.js中详细展示了如何检测localStorage中的Token并进行相应的路由控制。

摘要由CSDN通过智能技术生成

Token 失效退出至登录页面_token退出-CSDN博客

在main.js里面加上

// 导航守卫：使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {
  if (to.path === "/login") {
    next();
  } else {
    let token = localStorage.getItem("token");
    if (token === null || token === "" || token === undefined) {
      console.log(token, "进行判断的token");
      next("/login");
    } else {
      next();
    }
  }
});

务必在new Vue({

el: "#app",

});之前加

ending