如何解决vue中判断是否登录的路由跳转和刷新关闭浏览器是否保存登录状态的问题

最新推荐文章于 2024-06-22 16:19:59 发布

Weightlessly

最新推荐文章于 2024-06-22 16:19:59 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue js

本文链接：https://blog.csdn.net/weixin_45860674/article/details/114149380

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

vue实现了全局变量的共享，然而vuex也不是万能的。有以下问题需要我解决：

他在刷新页面的时候就会消失，回到初始化设置，那么怎么解决这个问题呢？
当我不关闭浏览器，再次打开页面时如何自动登录不需要再次输入密码呢？
当我关闭浏览器之后，如何实现打开时才重新输入账号密码进行登录呢？
如何在未登录时手动访问其他页面跳回登录页面呢？

我的想法是在App.vue中使用localstorage和cookies结合：

1.首先需要下载vue-cookies

npm install vue-cookies --save

为什么单用一个不行呢？

locastorage是为了在页面刷新的时候，保存store中的state数据

cookie是为了在关闭浏览器时，即便是localtorage还保留着数据，但cookie已经清除，所以也会返回login页面。

如果只留下localstorage会存在关闭浏览器再打开时自动登录的情况，我们需要再次登录所以不行。

当然转念一想好像可以不需要localstorage直接用cookie判断，下次再尝试看看。

2.在App.vue中写入

created(){
  
    //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload",()=>{   
      localStorage.setItem("messageStore",JSON.stringify(this.$store.state));
    })
  
    //在页面加载时读取localStorage里的状态信息
    localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))));
  	//在store的index.js中state中保存了一个isLogin变量，表示是否是登录页面
    console.log(this.$store.state.isLogin);
    //当store中的isLogin为false，或者cookie中存在已经登录的username，
    //才表示在进入网页时不需再次输入密码就可自动登录，跳转到个人中心
    if(!this.$store.state.isLogin && this.$cookies.isKey("username"))
    {
      this.$router.push('/person/center');
    }
    //关闭浏览器或者是退出登录后都会使得cookie清除，这样还是会跳回login页面
    else  this.$router.push('/login');

},

3.路由监听

然而在未登录前手动更改router的路径会使得其他页面展现但未请求到用户的数据（原因是未登录），那该怎么在未登录的情况下，手动访问所有的页面路径都跳回login登录页面呢？

可以在App.vue中添加页面的监听事件：

  watch: {
      $route(to, from) {
        console.log(this.$cookies.isKey('username'));
        //监听路由是否变化
        if (!this.$cookies.isKey('username')) {
          this.$router.push('/login');
        }
      }
    },

这个地方我来根据登录后是否设置了cookie的username来判断登录状态，如果登录了则this.$cookies.isKey(“username”)就会返回true,否则返回false，那么我再将路由跳回login。

PS：当然在登录成功退出登录的时候要记得：

this.$cookies.set("username",this.username);//登录成功
this.$store.state.isLogin = false;//登录成功


this.$cookies.remove("username");//退出登录
this.$store.state.isLogin = true;//退出登录