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

---

前言

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

---

一、sessionStorage和localStorage区别和使用

1、localStorage（本地储存）：

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

2、sessionStorage（会话储存）：

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

二、每次进入页面登录：

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

三、设置登录有效期：

方法一 、

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

例：

//每次登录成功则记录登录时间
 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；七天：604800000
 if (intervalTime >= 604800000) {
  //清空控制登录状态的相关数据，并且跳转页面
   window.localStorage.setItem("loginFlag", "");
   this.$store.state.loginFlag = false;
   this.$router.push("/login");
 }

方法二 、

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

例：

// 响应拦截
    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' });
        }

---

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