vue 监听sessionStorage存值的变化

最新推荐文章于 2024-10-08 13:42:15 发布

施玥喵

最新推荐文章于 2024-10-08 13:42:15 发布

阅读量2.1k

点赞数

分类专栏：笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/macangyewangs/article/details/122324439

版权

该博客介绍如何在Vue应用中通过监听sessionStorage的变化，实现在用户未登录状态下切换路由时弹出登录页面的功能。主要涉及在main.js中设置路由监听以及使用sessionStorage.js进行相关操作。

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

在main.js进行路由监听，点击其他页面如果是未登录得状态，弹出登录页面

main.js

import { resetSetItem} from "@/utils/watchsessionStorage";
//路由拦截

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
    // console.log(to.meta.requireAuth);
    // console.log(sessionStorage.getItem('token'));
    if (sessionStorage.getItem('token')) { // 判断是否已经登录
      next()
    }else {
      console.log('---------main.js');
      //调用方法resetSetItem等同于sessionStorage.setItem('dialogLogin',true)
      resetSetItem('dialogLogin', true);

      // ElementUI.Message({
      //   message: "请先登录",
      //   type: "warning",
      //   duration: 5000,
      //   showClose: true,
      // });
      next({path: '/'})
    }
  }
  else {
    next()
  }  
})

watchsessionStorage.js