Vue项目如何保持用户登录状态(localStorage+vuex刷新页面后状态依然保持)

目录
  • 前言
  • 一、实现效果
  • 二、实现步骤及涉及要点
  • 三、涉及代码
  • 总结

前言

在前端项目开发中,实现用户的登陆注册功能时常常会有一个问题,那就是我们设置的登录状态,在浏览器页面刷新后就消失了,这其实只是因为我们没有保存用户状态。

这里小马演示使用的是 localStorage + vuex 方法(其他诸如 sessionStorage、cookie 等用法相同,只是功能有所区别)。

一、实现效果

实现功能:用户登录成功后,刷新浏览器页面或者关闭浏览器再次打开网页后,登录状态依然保持,直到用户点击登出。

二、实现步骤及涉及要点

1. 首先在 vuex 中的 state 属性中添加一个空对象 userInfo{ } 用于保存用户登录后的状态;

涉及要点:

state 属性(状态)用于添加多个组件共享的变量,作用类似于 vue 中的 data;

2. 在登录页面中,判断登录成功后创建对象 userInfo{ },并添加描述登录状态的各属性,然后将该对象分别存入 localStorage 和 vuex;

涉及要点:

  • localStorage 属性允许访问 Document 源的 Storage 对象,存储的数据保存在浏览器会话中;
  • 与 sessionStorage 的唯一区别就是 localStorage 属于永久性存储,除非我们手动清除,而 sessionStorage 属于临时存储,浏览器关闭后便会被清空。
    • 存:localStorage.setItem('myCat', 'Tom');
    • 取:var cat = localStorage.getItem("myCat");
    • 删:localStorage.removeItem("myCat"); 或 localStorage.clear("myCat");
  • JSON.stringify() 系列化对象,将返回的对象类型转为字符串类型;
  • this.$store.state,取 vuex 中 state 中的属性,如:
    • this.$store.state.userInfo = userInfo //取出 vuex 中的 userInfo 并赋值为新的 userInfo

3. 在挂载阶段,判断登录状态 userInfo;设置相关属性之后,就可以正常保存登录状态了。

因为 localStorage 为永久保存,所以即使关闭浏览器再次打开网页登录状态依然存在,除非手动清除 localStorage 数据;

4. 设置登出,清除 localStorage 中的数据;

5. 实现功能。

三、涉及代码

vuex(store/index.js)

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userInfo:{}
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

设置登录的页面(部分代码,无法复制即用,仅作参考)

登录方法

//登录方法
login() {
  //验证码的验证
  var randStr = this.rand.toString().replace(/,/g, ""); //随机生成的验证码为数组形式,此处将其转为字符串并去掉中间相隔的逗号
  var codeStr = this.code; //用户输入的验证码
  if (randStr.toLowerCase() == codeStr.toLowerCase()) { //比较用户输入的与随机生成的验证码,不区分大小写
    //获取登录接口
    axios.post("user/login", {
      name: this.name,
      password: this.password,
      administrator: this.usertyp
    }).then(result => {
      console.log(result.data);
      const code = result.data.code;
      this.token = code;
      if (this.token == 1003) {
        this.$message.error('用户名或密码未输入!');
      } else if (this.token == 1001) {
        this.$message.error('登录失败,请检查用户名或者密码是否正确。');
      } else if (this.token == 1005) {
        this.$message.error('您不是管理员,无管理员登录权限!');
      } else if (this.token == 200) {
        if (this.usertyp == "2") { //管理员登录
          this.$message.success('登录成功!');
          this.dialogFormVisible = false; //登录成功后登录插槽关闭
          this.loginReg = false;//隐藏登录注册按钮,显示欢迎信息
          this.manage = true;//显示管理员登录信息
          let userInfo = {
            isLogin: true,
            manage: true,
            name: this.name
          };
          localStorage.setItem("userInfo", JSON.stringify(userInfo));
          this.$store.state.userInfo = userInfo
          console.log('this.$store.state.userInfo', this.$store.state.userInfo)
          setTimeout(() => { //此处必须使用vue函数,否则this无法访vue实例
            this.$message(`欢迎您,管理员 ${this.name}!`)
          }, 2000);
          console.log(this.usertyp)
        } else if (this.usertyp == "") {  //普通用户
          this.$message.success('登录成功!');
          this.dialogFormVisible = false; //登录成功后插槽关闭
          this.loginReg = false;//隐藏登录注册按钮,显示欢迎信息
          this.user = true; //显示普通用户登录信息
          let userInfo = {
            isLogin: true,
            manage: false,
            name: this.name
          }
          localStorage.setItem("userInfo", JSON.stringify(userInfo));
          this.$store.state.userInfo = userInfo
          setTimeout(() => { //此处必须使用vue函数,否则this无法访vue实例
            this.$message(`欢迎您,尊贵的晋之魂用户 ${this.name}!`)
          }, 2000);
          console.log(this.usertyp)
        }
        this.Cookie.set("UserName", this.name); //将用户名存到cookie
        console.log('登录状态为:' + this.token);
      }
    })
  } else {
    this.$message.error('请输入正确的验证码');
  }
},

退出登录方法

//退出登录
logout() {
  this.Cookie.remove("UserName");
  this.loginReg = true;
  this.manage = false;
  this.user = false;
  this.log_out = false;
  localStorage.clear();
  setTimeout(() => {
    this.$router.push({
      path: '/'
    }, () => {
    }, () => {
    });//退出登录后2秒后跳转至首页
  }, 2000)
  //加()=>{},()=>{} 可解决路由重复后台报错问题
},

挂载阶段判断登录状态

mounted() {
      // 判断登录状态
      let userInfo = JSON.parse(localStorage.getItem('userInfo'));
      if (null === userInfo) return;
      console.log('userInfo', userInfo.isLogin);
      if (userInfo.isLogin) {
        this.dialogFormVisible = false; //登录成功后插槽关闭
        this.loginReg = false;//隐藏登录注册按钮,显示欢迎信息
        this.name = userInfo.name;
        if (userInfo.manage) {
          this.manage = true;//显示管理员登录信息
        } else {
          this.user = true;//显示普通用户登录信息
        }
      }
    }

提示:小马使用的是 vue + Element UI,使用其他技术代码可能不同,但思路是不变的。

总结

到此这篇关于Vue项目如何保持用户登录状态的文章就介绍到这了,更多相关Vue保持用户登录状态内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-05-13

Vue中保存用户登录状态实例代码

首先我们假设,这里的登录组件(register.vue)是App.vue组件的子组件,是通过路由进入登录组件的. 登录组件中用户点击登录后,后台会传过来一个用户名,我的App.vue组件中需要拿到这个用户名,并将上面的"登录注册"字样变为"用户名". 为了保证用户刷新后用户名不会消失,这里我用到了sessionStorage 代码如下: register.vue中用户点击登录触发signIn方法 signIn(){ this.formData = $(".

详解Vuex管理登录状态

又仔细看了一遍vuex的文档,还是云里雾里的,不过至少明白它是一个专门管理状态的,根据数据状态的改变可以驱动视图更新,既然是这样那至少登录注册是一种状态,就用登录来做测试,学习vuex,不过话说回来,既然专门管理状态,那我至少要仔细推敲一下这个learn的学习项目有那些状态逻辑. 1.据说储存的vuex store里面的状态是临时的,右键刷新一下页面这些状态就销毁了(这是据说,请大神解惑我也没办法证实),如果是这样的话,我的用户状态user还是应该要写入sessionStorage,不然登录了的

Vue登录注册并保持登录状态的方法

关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法. 项目中有一些路由是需要登录才可以进入的,比如首页,个人中心等等 有一些路由是不需要登录就可以进入,比如登录页,注册页,忘记密码等等 那如何判断路由是否需要登录呢?就要在路由JS里面做文章 在router.js中添加meta区分 比如登录注册页面,不需要登录即可进入,那么我们把meta中的isLogin标志设置

vuex项目中登录状态管理的实践过程

目录 工具: 登录场景: 实践: 场景1思考与实践 场景2思考与实践 总结 工具: chorme浏览器安装Vue.js devtools方便调试 登录场景: 页面的导航处或其他地方有时会显示用户现在的登录状态,状态可分为:未登录,正在登录(loading),登录成功并显示用户名. 有些页面是不需要登录就可以让用户浏览的,但是有些页面必须登录才可以进入浏览. 实践: 场景1思考与实践 用vuex创建一个数据仓库 //src目录下新建一个store目录,创建index.js如下 //创建数据仓库 i

vue项目中api接口管理总结

默认vue项目中已经使用vue-cli生成,安装axios,基于element-ui开发,axiosconfig目录和api目录是同级,主要记录配置的相关. 1. 在axiosconfig目录下的axiosConfig.js import Vue from 'vue' import axios from 'axios' import qs from 'qs' import { Message, Loading } from 'element-ui' // 响应时间 axios.defaults.

详解vuex之store拆分即多模块状态管理(modules)篇

了解vuex的朋友都知道它是vue用来集中管理状态的容器,如果了解过Reduce的朋友可能看见他时就会非常熟悉,都是用来管理全局的状态的,实现不同组件之间相互的数据访问.这里我们不介绍vuex,主要介绍vuex拆分store以及多模块管理.我们知道如果一个项目非常大的话状态就会非常的多,如果不进行分类处理,所有的状态都维护在一个state里面的话,状态管理就会变得非常的混乱,这样非常不利于项目的后期维护.我们现在前端推崇模块化开发,为的就是提高开发效率和维护效率,避免重复工作.那么vuex是怎么

vuex实现登录状态的存储,未登录状态不允许浏览的方法

基础思路就是使用vuex状态管理来存储登录状态(其实就是存一个值,例如token),然后在路由跳转前进行登录状态的判断,可以使用vue-router的全局前置守卫beforeEach,也可以使用路由独享的守卫beforeEnter. 导航守卫 正如其名,vue-router``` 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察 $route 对象来应对

详解vuex状态管理模式

一.前言 本次接受一个BI系统,要求是能够接入数据源-得到数据集-对数据集进行处理-展现为数据的可视化,这一个系统为了接入公司自身的产品,后端技术采用spring boot,前端采用vue+vuex+axios的项目架构方式,vuex作为vue的状态管理,是尤为重要的部分.这里,我将vuex如何运作和使用做一次总结,有错的地方,望多多提点. 二.vuex简单使用 安装vuex cnpm install vuex --save 在src目录下建立文件夹,命名为store,建立index.js 如图

Flutter 状态管理的实现

一.什么是状态管理 大到整个app的状态,用户使用app是登录状态,还是游客状态:小到一个按钮的状态,按钮是点击选中状态还是未点击状态等等,这些都是状态管理. 二.命令式编程和声明式编程状态管理的区别 iOS是如何管理状态的,一般都是获取这个控件然后设置你想要的状态 当你的 Flutter 应用的状态发生改变时(例如,用户在设置界面中点击了一个开关选项)你改变了状态,这将会触发用户界面的重绘.去改变用户界面本身是没有必要的(例如 widget.setText )-你改变了状态,那么用户界面将重新

详解Vue.js项目API、Router配置拆分实践

前后端分离开发方式前端拥有更高的控制权 随着前端框架技术的飞速发展,Router这个概念也被迅速普及到前端项目中,在早期前后的没有分离的时期下,并没有明确的路由概念,前端页面跳转大多是通过后端进行请求转发的,比如在Spring MVC项目中,进行一个页面跳转如下(画红线部分): 前端需要一个超链接,链接的href=/manager,这样这个超链接被转发到scs/waitFollowed路径指定的页面. 前后的分离后,前端页面跳转的方式发生了变化,不再需要后端处理了,数据交换方式也改变了,由此前端

如何在项目中使用log4.js的方法步骤

pm2中自带的日志内容是不能满足日常的需求的,因此需要在项目中加上日志管理,这里研究了下log4的使用方法,效果挺好的,想要查看的都可以找到,记录下简单的使用步骤 log4的配合 // config.js let path = require('path'); // 日志根目录 let baseLogPath = path.resolve(__dirname, '../../../logs'); // 请求日志目录 let reqPath = '/request'; // 请求日志文件名 let

详解Vue中状态管理Vuex

vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试. 在vuex出现之前,vue里面的状态是属于'单向数据流'.举个官网的例子: new Vue({ // state data () { return { count: 0 } }, // view template: `<div>{{ count }} </div`, // actions methods: { increment () { this.count++ } } }) 其中 state

vue.js的状态管理vuex中store的使用详解

一.状态管理(vuex)简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试.状态快照导入导出等高级调试功能. 二.状态管理核心 状态管理有5个核心,分别是state.getter.mutation.action以及module.分别简单的介绍一下它们: 1.state state为