vue：如何应用路由监听或组件重载让登录状态保持

---

一、前言

上一篇文章讲到了如何设计网页的微信扫码登录功能，这篇文章主要讲解如何应用路由监听或组件重载让登录状态保持。

当页面发生切换时，我们希望已经登录好的用户状态能一直保留，这一功能通过路由监听或组件重载的方式都是可以实现的。

那么开始啦~

---

项目文件夹目录如下：

---

二、方法一_路由监听

路由监听的逻辑是检测浏览器地址的变化，获取token并更新顶部导航栏的登录状态。

关于路由监听，可以用vue中的watch属性来实现。

这里顺便补充以下有关watch属性的基本知识~

watch属性的书写语法如下：

watch: {
    searchText: {
    //searchText是自定义的变量名
      handler() {
      //向handler传入参数newVal,oldVal并打印，可以得到浏览器的旧地址与新地址
        this.loadSearchSuggestions(value);
      }, 
      immediate: true //该回调将会在侦听开始之后被立即调用
    }
  }

watch属性的相关说明如下：

我们使用watch监听数据时，有三个选项，handler，deep，immediate。
handler属性
我们平时的写法，就默认写的是handler，vue.js会处理这个逻辑，最终编译出来就是这个handle
deep属性
不知道你注意到了没有？
当watch的是一个Object类型的数据，如果这个对象内部的某个值发生了改变，并不会触发watch动作！
也就是说，watch默认情况下，不监测内部嵌套数据的变动。但是很多情况下，我们是需要监测的。
为解决这一问题，就要使用deep属性；
immediate属性
watch 的handler函数通常情况下只有在监听的属性发生改变时才会触发。
但有些时候，我们希望在组件创建后，或者说watch被声明和绑定的时候，立刻执行一次handler函数，这就需要使用immediate属性了，它默认为false，改为true后，就会立刻执行handler。

项目具体代码如下，书写在TopBar.vue中：

watch: {
     "$route.path": {
       handler(newVal, oldVal) {
  //       console.log(newVal, oldVal);
         let mytoken = localStorage.getItem("x-auth-token");
         this.chanIsLogined(Boolean(mytoken));
       },
     },
   },

之所以这里要调用chanIsLogined()，是由于登录按钮是否展示是由于vuex中该方法中的变量isLogined决定的：

<li @click="showModal" class="login-btn" v-show="!isLogined">登录</li>

此外，值得一提的是this.chanIsLogined(Boolean(mytoken)是一种优化后的写法，原有的更简单的逻辑如下，因为很简单就不多说啦~大家自己看一看：

watch: {
     "$route.path": {
       handler(newVal, oldVal) {
  //       console.log(newVal, oldVal);
  //判断有没有token
         let mytoken = localStorage.getItem("x-auth-token");
         if(mytoken){
         this.chanIsLogined(true);
         }
         else{
         this.chanIsLogined(false);
         }
       },
     },
   },

三、方法二_组件重载

上面的功能，也可以使用组件重载的方式来完成。 即每次切换路由，我们都让TopBar.vue重新加载一次。

如何进行组件重载？利用key属性。

先删除TopBar.vue中的watch。

然后来到App.vue组件，给调用TopBar.vue的地方添加key属性，并在data中return它（从字面上理解 data 是数据的意思return是返回的意思，即将数据返回出去）。代码如下：

<template>	
	...
	<!-- 顶部 -->
    <TopBar :key="topBarKeyValue"></TopBar>
	...
</template>
<script>
    data() {
    return {
      topBarKeyValue:1
    };
  },
	...
    watch: {
    // 监听路由的变化
    "$route.path": {
      handler(newVal, oldVal){
        // console.log(newVal, oldVal)
        if(newVal !== oldVal){
          // key属性的值一变化，就会做组件重载，从而执行created函数
          console.log("组件重载！！！！");
          this.topBarKeyValue++;
        }
      }
    }
  },
</script>	

再回到TopBar.vue，在其中载入登录状态。

重载后create()下的内容会执行，这时候是没有code的情况，所以要在原有条件表达式的基础上写一个else。代码如下：

else {
        //没有code的状态下，判断有没有token
        let mytoken = localStorage.getItem("x-auth-token");
        this.chanIsLogined(Boolean(mytoken));
      }

书写位置如图：

四、总结

本篇文章主要讲解了如何应用路由监听或组件重载让登录状态保持。今天的复盘就到此结束了，感谢大家的阅读！