vue 退出登录 清除localStorage的问题

 更新时间:2022年12月20日 14:30:56   作者:xiaodong_blogs  
这篇文章主要介绍了vue 退出登录 清除localStorage的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue 退出登录 清除localStorage

在vue登录的时候我们会保持状态 如下:

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'
                    })
                }
            })
        }
    },

此时 浏览器中会将状态保存

当退出账号 我们就需要 清除状态保持

<template>
	<div>
		<a @click="exit" >退出</a>
	</div>
</template>
<script>
import axios from 'axios'
export default {
    props: {
        passUser:{

        }
    },
    data() {
        return {

        }
    },
    methods: {
        exit(){
        	// 清除状态保持
            window.localStorage.clear()
            // 状态保持清除后刷新页面
            window.location.reload()

        }
    },
    created() {

    }
}
</script>

<style scoped>

</style>

vue 登录后无操作半小时后自动清除登录状态

在项目的页面入口文件App.vue文件中监听用户最后一次操作鼠标、键盘或滚动事件:

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
// 登录状态使用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: {
    // 使用防抖,对于短时间内(此处是3s)连续触发的事件,只执行最后一次
    debounce (fn, delay) {
      let timer = null
      return function () {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(fn, delay)
      }
    },
    resetStatus () { // 重置store插件自动清除时间
      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>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue.js标签页组件使用方法详解

    Vue.js标签页组件使用方法详解

    这篇文章主要为大家详细介绍了Vue.js标签页组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一
    2019-10-10
  • 使用vue制作探探滑动堆叠组件的实例代码

    使用vue制作探探滑动堆叠组件的实例代码

    探探的堆叠滑动组件起到了关键的作用,下面就来看看如何用vue写一个探探的堆叠组件,感兴趣的朋友一起看看吧
    2018-03-03
  • vue实现组件跟随鼠标位置弹出效果(示例代码)

    vue实现组件跟随鼠标位置弹出效果(示例代码)

    这篇文章主要介绍了vue中实现组件跟随鼠标位置弹出效果,本文通过图文示例代码相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-02-02
  • vue绑定的点击事件阻止冒泡的实例

    vue绑定的点击事件阻止冒泡的实例

    下面小编就为大家分享一篇vue绑定的点击事件阻止冒泡的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vue中搭配Bootstrap实现Vue的列表增删功能

    Vue中搭配Bootstrap实现Vue的列表增删功能

    日常开发中,我们可以用 “拿来主义” 借助Bootstarp现成的一些样式,快速生成我们想要的页面布局,避免书写大量的HTML和CSS代码,省下了许多不必要的时间,可以直接搭配vue使用
    2022-11-11
  • 如何封装axios form-data针对统一的formData入参方式

    如何封装axios form-data针对统一的formData入参方式

    这篇文章主要介绍了如何封装axios form-data针对统一的formData入参方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 在Vue3中使用CSS Modules实现样式隔离

    在Vue3中使用CSS Modules实现样式隔离

    随着构建现代前端应用的需要,样式的管理和隔离变得越来越重要,为了解决样式冲突和管理困难的问题,CSS Modules 应运而生,本文我们将讨论如何在 Vue3 中使用 CSS Modules 实现样式隔离,需要的朋友可以参考下
    2024-09-09
  • Vue项目中常用的实用技巧汇总

    Vue项目中常用的实用技巧汇总

    如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优,这篇文章主要给大家汇总介绍了关于Vue项目中常用的实用技巧,需要的朋友可以参考下
    2021-07-07
  • vue中 数字相加为字串转化为数值的例子

    vue中 数字相加为字串转化为数值的例子

    今天小编就为大家分享一篇vue中 数字相加为字串转化为数值的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue导出页面为PDF格式的实现思路

    Vue导出页面为PDF格式的实现思路

    这篇文章主要介绍了Vue导出页面为PDF格式的实现思路,其实思路也很简单,就是将页面转换成图片格式.然后通过图片的base64码.生成PDF..感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-07-07

最新评论