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通过滚动行为实现从列表到详情,返回列表原位置的方法

    vue通过滚动行为实现从列表到详情,返回列表原位置的方法

    今天小编就为大家分享一篇vue通过滚动行为实现从列表到详情,返回列表原位置的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vuejs+element-ui+laravel5.4上传文件的示例代码

    vuejs+element-ui+laravel5.4上传文件的示例代码

    本篇文章主要介绍了vuejs+element-ui+laravel5.4上传文件的示例代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • vue如何实现上传图片和显示图片

    vue如何实现上传图片和显示图片

    这篇文章主要介绍了vue如何实现上传图片和显示图片问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue项目部署后首页白屏问题排查与解决方法

    Vue项目部署后首页白屏问题排查与解决方法

    在部署 Vue.js 项目时,有时会遇到首页加载后出现白屏的情况,这可能是由于多种原因造成的,本文将介绍一些常见的排查方法和解决方案,帮助开发者快速定位问题并解决,感兴趣的小伙伴跟着小编一起来看看吧
    2024-08-08
  • vue的路由映射问题及解决方案

    vue的路由映射问题及解决方案

    这篇文章主要介绍了vue的路由映射问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • Vue单页面应用做预渲染的方法实例

    Vue单页面应用做预渲染的方法实例

    vue是一个单页面的应用,这导致一些爬虫和百度无法搜索到,如果你想针对你应用的其中某些页面进行SEO优化,让他们可以被爬虫和百度搜索到,你可以进行预渲染操作,下面这篇文章主要给大家介绍了关于Vue单页面应用做预渲染的相关资料,需要的朋友可以参考下
    2021-10-10
  • vue3动态路由+菜单栏的实现示例

    vue3动态路由+菜单栏的实现示例

    在后台管理系统,可以根据登录用户的不同返回不同路由,页面也会根据这些路由生成对应的菜单,本文主要介绍了vue3动态路由+菜单栏的实现示例,感兴趣的可以了解一下
    2024-04-04
  • 简单聊聊Vue中的计算属性和属性侦听

    简单聊聊Vue中的计算属性和属性侦听

    计算属性用于处理复杂的业务逻辑,vue提供了检测数据变化的一个属性watch可以通过newVal获取变化之后的值,这篇文章主要给大家介绍了关于Vue中计算属性和属性侦听的相关资料,需要的朋友可以参考下
    2021-10-10
  • el-select与el-tree结合使用实现树形结构多选框

    el-select与el-tree结合使用实现树形结构多选框

    我们在实际开发中需要用到下拉树,elementUI是没有这个组件的,我们就要自己去写了,下面这篇文章主要给大家介绍了关于el-select与el-tree结合使用实现树形结构多选框的相关资料,需要的朋友可以参考下
    2022-10-10
  • vue中$router.back()和$router.go()的用法

    vue中$router.back()和$router.go()的用法

    这篇文章主要介绍了vue中$router.back()和$router.go()的用法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论