vue?退出登錄?清除localStorage的問(wèn)題
vue 退出登錄 清除localStorage
在vue登錄的時(shí)候我們會(huì)保持狀態(tài) 如下:
methods: {
login(){
this.axios.post('users/login/',this.form).then(res=>{
console.log(res.data)
if(res.data.code == 200){
localStorage.setItem('userid',res.data.userid)
localStorage.setItem('username',res.data.username)
localStorage.setItem('mobile',res.data.mobile)
this.$router.push({
name:'Index'
})
}
})
}
},
此時(shí) 瀏覽器中會(huì)將狀態(tài)保存

當(dāng)退出賬號(hào) 我們就需要 清除狀態(tài)保持
<template>
<div>
<a @click="exit" >退出</a>
</div>
</template>
<script>
import axios from 'axios'
export default {
props: {
passUser:{
}
},
data() {
return {
}
},
methods: {
exit(){
// 清除狀態(tài)保持
window.localStorage.clear()
// 狀態(tài)保持清除后刷新頁(yè)面
window.location.reload()
}
},
created() {
}
}
</script>
<style scoped>
</style>
vue 登錄后無(wú)操作半小時(shí)后自動(dòng)清除登錄狀態(tài)
在項(xiàng)目的頁(yè)面入口文件App.vue文件中監(jiān)聽用戶最后一次操作鼠標(biāo)、鍵盤或滾動(dòng)事件:
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
// 登錄狀態(tài)使用store插件保存在客戶端的localStorage中
import storage from 'store'
export default {
name: 'App',
computed: {
token () {
return storage.get('TOKEN')
},
uid () {
return storage.get('UID')
},
userInfo () {
return storage.get('USER_INFO')
}
},
mounted () {
document.onmousemove = this.debounce(this.resetStatus, 3000)
document.onkeydown = this.debounce(this.resetStatus, 3000)
document.onscroll = this.debounce(this.resetStatus, 3000)
},
methods: {
// 使用防抖,對(duì)于短時(shí)間內(nèi)(此處是3s)連續(xù)觸發(fā)的事件,只執(zhí)行最后一次
debounce (fn, delay) {
let timer = null
return function () {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(fn, delay)
}
},
resetStatus () { // 重置store插件自動(dòng)清除時(shí)間
if (this.token) {
storage.set('TOKEN', this.token, new Date().getTime() + 30 * 60 * 1000)
storage.set('UID', this.uid, new Date().getTime() + 30 * 60 * 1000)
storage.set('USER_INFO', this.userInfo, new Date().getTime() + 30 * 60 * 1000)
}
}
}
}
</script>
<style lang="less" scoped>
#app {
min-height: 100vh;
min-width: 1200px;
margin: 0 auto;
}
</style>總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
使用vue制作探探滑動(dòng)堆疊組件的實(shí)例代碼
探探的堆疊滑動(dòng)組件起到了關(guān)鍵的作用,下面就來(lái)看看如何用vue寫一個(gè)探探的堆疊組件,感興趣的朋友一起看看吧2018-03-03
vue實(shí)現(xiàn)組件跟隨鼠標(biāo)位置彈出效果(示例代碼)
這篇文章主要介紹了vue中實(shí)現(xiàn)組件跟隨鼠標(biāo)位置彈出效果,本文通過(guò)圖文示例代碼相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-02-02
Vue中搭配Bootstrap實(shí)現(xiàn)Vue的列表增刪功能
日常開發(fā)中,我們可以用?“拿來(lái)主義”?借助Bootstarp現(xiàn)成的一些樣式,快速生成我們想要的頁(yè)面布局,避免書寫大量的HTML和CSS代碼,省下了許多不必要的時(shí)間,可以直接搭配vue使用2022-11-11
在Vue3中使用CSS Modules實(shí)現(xiàn)樣式隔離
vue中 數(shù)字相加為字串轉(zhuǎn)化為數(shù)值的例子
Vue導(dǎo)出頁(yè)面為PDF格式的實(shí)現(xiàn)思路

