草庐IT

前端登录退出：处理Token问题（获取、缓存、失效处理）以及代码实现

离奇6厘米 2023-04-03 原文

目录

一、什么是Token

Token是服务端生成的一串字符串，当用户第一次登陆成功后，服务器会生成一个token，并将其返回给客户端。
当用户再次向服务器请求数据时，只需要携带着token请求数据即可，无需再次登陆用户名和密码
目的
通过token做一层数据拦截，可以减少数据库请求次数，减缓服务器压力

二、获取token

当用户第一次登陆成功之后，后台会返回一个token给到客户端，前端将token缓存到本地，然后每次发请求时需要在 header 里边带上 token，这个时候本地的 token 和后台数据库中的 token 进行一个验证，如果两者一致，则请求成功，否则失败。

三、Token失效处理

既然前后端通过token交互，如果一直有效，会有安全风险，所以我们需要在客户端进行一下token的时间检查
服务器的token一般不会设置太长，根据实际一般是1-7天，没有一个token是永久的，永久的token就相当于一串永久的密钥，是不安全的。

token失效一般用两种情形：
① 主动退出：用户点击退出登录按钮后退出
② 被动退出：token过期，或被人“顶号”退出

注意点

无论什么方式退出token，在用户退出时，所需要执行的操作都是固定的
1、清理掉当前用户的缓存数据
2、清理掉相关权限的配置
3、返回到登录页面

1、主动退出

用户主动点击退出功能实现
user.js

// 获取退出登录
logout(context) {
  context.commit("removeToken"); // 删除token
  context.commit("reomveUserInfo"); // 删除用户信息
},

2、Token过期

① 逻辑图

②方案

在用户登录时，记录当前的登录时间
制定一个token时效时长
在接口调用时，根据当前时间对比登录时间，看是否超过了时效时间
如果未超过，则正常进行后续操作，如果超过，则进行退出登录操作

③代码实现

user.js

// 获取登录信息
async login(context, data) {
  const result = await loginInfo(data);
  context.commit("setToken", result);
  setTimeStamp(); // 写入时间戳
},

auth.js

import Cookies from "js-cookie";
const timeKey = 'liqi6limi-timestamp-key' // 设置一个独一无二的key

// 获取时间戳
export function getTimeStamp() {
  return Cookies.get(timeKey)
}
// 设置时间戳
export function setTimeStamp() {
  Cookies.set(timeKey, Date.now())
}

// 设置超时时间
export const TimeOut = 3600; 

// 是否超时
export function IsCheckTimeOut() {
  var currentTime = Date.now(); // 当前时间戳
  var timeStamp = getTimeStamp(); // 缓存时间戳
  return (currentTime - timeStamp) / 1000 > TimeOut;
}

request.js

import store from "@/store";
import axios from "axios";
import { getTimeStamp,IsCheckTimeOut } from "@/utils/auth";
import router from "@/router";

// 创建axios实例
const service = axios.create({
  baseURL: "/api",
  timeout: 5000,
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 是否存在token
    if (store.getters.token) {
      if (IsCheckTimeOut()) {
        store.dispatch("user/logout"); // 退出登录的action
        router.push("/login"); // 跳转到登录页
        return Promise.reject(new Error("token超时了")); // 抛出的错误，会在响应拦截器的错误捕捉中捕捉到
        console.log("超时");
      }
      config.headers["Authorization"] = `Bearer ${store.getters.token}`; // 如果token存在 注入token
    }
    return config; // 必须返回配置
  },
  (error) => {
    return Promise.reject(error);
  }
);

3、被人顶号

① 逻辑图

② 方案

后端返回数据时，会返回特定的状态码通知前端
当前端接收到特定状态码时，表示遇到了特定状态：此时进行退出登录处理

③代码实现

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // axios默认加了一层data
    const { success, message, data } = response.data;
    //   要根据success的成功与否决定下面的操作
    if (success) {
      return data;
    } else {
      // 业务已经错误了 
      Message.error(message); // 提示错误消息
      return Promise.reject(new Error(message));
    }
  },
  (error) => {
    // error 信息 里面 response的对象
    if (
      error.response &&
      error.response.data &&
      error.response.data.code === 10002
    ) {
      // 当等于10002的时候 表示 后端告诉我token超时了
      store.dispatch("user/logout"); // 登出action 删除token
      router.push("/login");
    } else {
      Message.error(error.message); // 提示错误信息
    }
    return Promise.reject(error);
  }
);
Token处理spantokenclassjavascript$vue.js$前端

有关前端登录退出：处理Token问题（获取、缓存、失效处理）以及代码实现的更多相关文章

  1. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

    如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  2. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  3. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  4. ruby-on-rails - Rails 源代码 : initialize hash in a weird way? - 2

    在rails源中:https://github.com/rails/rails/blob/master/activesupport/lib/active_support/lazy_load_hooks.rb可以看到以下内容@load_hooks=Hash.new{|h,k|h[k]=[]}在IRB中，它只是初始化一个空哈希。和做有什么区别@load_hooks=Hash.new 最佳答案 查看rubydocumentationforHashnew→new_hashclicktotogglesourcenew(obj)→new_has

  5. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  6. ruby-on-rails - Rails 中的 NoMethodError::MailersController#preview undefined method `activation_token=' for nil:NilClass - 2

    似乎无法为此找到有效的答案。我正在阅读Rails教程的第10章第10.1.2节，但似乎无法使邮件程序预览正常工作。我发现处理错误的所有答案都与教程的不同部分相关，我假设我犯的错误正盯着我的脸。我已经完成并将教程中的代码复制/粘贴到相关文件中，但到目前为止，我还看不出我输入的内容与教程中的内容有什么区别。到目前为止，建议是在函数定义中添加或删除参数user，但这并没有解决问题。触发错误的url是http://localhost:3000/rails/mailers/user_mailer/account_activation.http://localhost:3000/rails/mai

  7. ruby - 简单获取法拉第超时 - 2

    有没有办法在这个简单的get方法中添加超时选项？我正在使用法拉第3.3。Faraday.get(url)四处寻找，我只能先发起连接后应用超时选项，然后应用超时选项。或者有什么简单的方法？这就是我现在正在做的:conn=Faraday.newresponse=conn.getdo|req|req.urlurlreq.options.timeout=2#2secondsend 最佳答案 试试这个:conn=Faraday.newdo|conn|conn.options.timeout=20endresponse=conn.get(url

  8. ruby-on-rails - 浏览 Ruby 源代码 - 2

    我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码，但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如，我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码？我知道在pry中我可以执行类似show-methodmethod的操作，但我如何才能对Rails框架中的方法执行此操作？您对我如何更好地理解Gem及其API有什么建议吗？仅仅阅读源代码似乎真的很难，尤其是对于框架。谢谢! 最佳答案 Ru

  9. ruby - 从 Ruby 中的主机名获取 IP 地址 - 2

    我有一个存储主机名的Ruby数组server_names。如果我打印出来，它看起来像这样:["hostname.abc.com","hostname2.abc.com","hostname3.abc.com"]相当标准。我想要做的是获取这些服务器的IP(可能将它们存储在另一个变量中)。看起来IPSocket类可以做到这一点，但我不确定如何使用IPSocket类遍历它。如果它只是尝试像这样打印出IP:server_names.eachdo|name|IPSocket::getaddress(name)pnameend它提示我没有提供服务器名称。这是语法问题还是我没有正确使用类？输出:ge

  10. ruby - 获取模块中定义的所有常量的值 - 2

    我想获取模块中定义的所有常量的值:moduleLettersA='apple'.freezeB='boy'.freezeendconstants给了我常量的名字:Letters.constants(false)#=>[:A,:B]如何获取它们的值的数组，即["apple","boy"]？ 最佳答案 为了做到这一点，请使用mapLetters.constants(false).map&Letters.method(:const_get)这将返回["a","b"]第二种方式:Letters.constants(false).map{|c

随机推荐