前言

本文内容和案例基于vue+token实现，有关如何实现基本的登录功能在 “前端vue3+token实现用户认证” 文章有提到，这里不做过多累述。
注：上面文章里的写法就是用户在登录页面登录一次后若不主动退出登录就会永久登录，下次进入页面无需二次登录。

一、sessionStorage和localStorage区别和使用

1、localStorage（本地储存）：

localStorage 属性存储的数据将保存在浏览器会话中，并且储存的数据可以长期保留；当页面会话结束——也就是说，当页面被关闭时，存储在 localStorage的数据不会被清除。
使用localStorage 属性储存的数据可在同一浏览器下的不同页面（同源页面）共享。

2、sessionStorage（会话储存）：

sessionStorage 属性存储的数据在页面会话结束——页面被关闭时，存储在 sessionStorage的数据将会被全部清除。
使用sessionStorage 属性储存的数据可在同一浏览器下的不同页面不可共享，打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。

二、每次进入页面登录：

由上面提到的 sessionStorage 和 localStorage 区别可知，只要把本地储存由 localStorage 更改为 sessionStorage 便可实现

三、设置登录有效期：

方法一、

在每次登录的时候记录登录时间（例如：用本地时间戳或向后端请求获取当前时间），并使用 localStorage 记录于本地。
每次打开页面时获取当前时间，记录于本地。并且使用当前时间-登录时记录的时间，若大于有效期则清空控制登录状态的相关数据,，跳转到登录页。

例：

//每次登录成功则记录登录时间window.localStorage.setItem("loginTime", Date.parse(new Date()));

//七天登录有效期设置let loginTime = window.localStorage.getItem("loginTime");let nowTime = Date.parse(new Date());let intervalTime = nowTime - loginTime;
//时间戳大小-------十秒：10000；一分钟：60000；七天：604800000if (intervalTime >= 604800000) {//清空控制登录状态的相关数据，并且跳转页面window.localStorage.setItem("loginFlag", "");this.$store.state.loginFlag = false;this.$router.push("/login");}

方法二、

和后端协商设置token有效期，并在用户打开页面时设置发送带token的请求接口用于验证token是否有效，若token过期则返回指定错误码。
前端获取到指定错误码后则跳转到登录页。

例：

// 响应拦截instance.interceptors.response.use(res => {return res ? res.data : res;}, err => {console.log(err);// "401" ，需要身份验证if (err.response.status == '401') {Toast.fail('请先登录');router.push({ path: '/login' });}

提示：文章到此结束，本文仅为个人看法，若有不足欢迎各位指出。

三种登录形式的实现—永久登录、每次进入页面登录、设置登录有效期相关推荐

VMWare虚拟机三种网络形式
网关的概念网关: 网关实质上是一个网络通向其他网络的IP地址.比如有网络A和网络B,网络A的IP地址范围为"192.168.1.1~192. 168.1.254",子网掩码为25 ...
File类的构造方法：三种重载形式（新手）
//导入的包.import java.io.File;//File类的构造方法三种重载形式//创建的一个类.public class zylx1 { //公共静态的主方法. public stati ...
二极管的三种击穿形式
二极管的三种击穿形式二极管的击穿通常有三种情况:雪崩击穿.齐纳击穿和热击穿. PN结反向击穿有齐纳击穿和雪崩击穿,一般两种击穿同时存在.对于齐纳管来说,两者的区别主要是:电压低于5-6V的齐纳管,齐 ...
IP 地址的三种表示形式
使用TCP/IP协议进行网络应用开发的朋友首先要面对的就是对IP地址信息的处理.IP地址其实有三种不同的表示格式: 1)Ascii(网络点分字符串)- 2) 网络地址(32位无符号整 ...
机器数的三种表示形式---原码、补码、反码和移码
疫情严重,没去上班,总结学习一下.武汉加油,中国加油. 一.真值和机器数介绍机器数的三种表示形式之前,先介绍一下真值和机器数. 带+.-符号的数叫真值,把符号数字化得到的数称为机器数(1表示-,0表 ...
JAVA编写程序，打印九九乘法表（涵盖三种表达形式）
运用java写出九九乘法表可以概括为三种表达形式一是长方型二是正三角型三是倒三角型无论是那种,用的都是for循环. 思路: 用两个for循环嵌套循环出因子a乘因子b等于乘积,外循环代表因子a ...
种草短视频的三种风格形式，问答、剧情和直述，总有一种适合你
种草短视频的三种风格形式,问答.剧情和直述,总有一种适合你想要做好种草短视频,最重要的一点还是要选对做种草短视频的风格形式,比如问答式.剧情式和直述式,总有一种是适合你做的. 一:问答式. 问答式的 ...
Oracle中的emp、dept、bonus及salgrade表的新建及MySQL中的三种注释形式
/*下面会包含三种mysql的注释形式 1.#... 2."-- ..."(--后需加一个空格) 3.*/ #1.创建dept表;插入dept表中的值 CREATE TABLE d ...
鲁棒最小二乘法的三种优化形式（CVX）
文章目录数据初始部分 (a) robust least-squares problem (b)least-squares problem with variable weights (c)quadr ...

三种登录形式的实现—永久登录、每次进入页面登录、设置登录有效期

三种登录形式的实现—永久登录、每次进入页面登录、设置登录有效期

前言

一、sessionStorage和localStorage区别和使用

1、localStorage（本地储存）：

2、sessionStorage（会话储存）：

二、每次进入页面登录：

三、设置登录有效期：

方法一、

方法二、

三种登录形式的实现—永久登录、每次进入页面登录、设置登录有效期相关推荐

最新文章

热门文章

三种登录形式的实现—永久登录、每次进入页面登录、设置登录有效期

三种登录形式的实现—永久登录、每次进入页面登录、设置登录有效期

前言

一、sessionStorage和localStorage区别和使用

1、localStorage（本地储存）：

2、sessionStorage（会话储存）：

二、每次进入页面登录：

三、设置登录有效期：

方法一 、

方法二 、

三种登录形式的实现—永久登录、每次进入页面登录、设置登录有效期相关推荐

最新文章

热门文章

方法一、

方法二、