一、前言
上一篇文章讲到了如何设计网页的微信扫码登录功能,这篇文章主要讲解如何应用路由监听或组件重载让登录状态保持。
当页面发生切换时,我们希望已经登录好的用户状态能一直保留,这一功能通过路由监听或组件重载的方式都是可以实现的。
那么开始啦~
项目文件夹目录如下:
二、方法一_路由监听
路由监听的逻辑是检测浏览器地址的变化,获取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));
}
书写位置如图:
四、总结
本篇文章主要讲解了如何应用路由监听或组件重载让登录状态保持。今天的复盘就到此结束了,感谢大家的阅读!