token解决了什么问题_plustoken官方网站

token解决了什么问题_plustoken官方网站面试官:说说token失效的处理方式

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

思路

1. token产生(存入本地)时的时间戳:用户成功登录,存token时记下此刻的时间戳A

2.token使用的时间戳:axios的请求拦截器中,请求会自动携带token,这就是使用token的时候,记下此刻的时间戳B

3.检查是否过期:时间差 = 时间戳B - 时间戳A ,将时间差与指定的token有效时长对比。如果大于有效时长,表示已经过期;如果小于有效时长,表示没过期

4.不同情况的处理

  • 已经过期:

    • 退出登录–清空token、当前用户信息,跳转到登录页
    • 更换token
  • 没过期:业务照常进行

那么废话不多说,我把代码给大家参考一下

  • 定义工具函数(先装包js-cookie
/* src/utils/auth.js */
import Cookies from 'js-cookie'

// 定义时间戳的key
const timeKey = 'hr-timestamp'

// 存时间戳
export function setTimeStamp() {
  return Cookies.set(timeKey, Date.now())
}

// 读时间戳
export function getTimeStamp() {
  return Cookies.get(timeKey)
}


  • 到Vuex中的登录函数中,记下登录成功时的时间戳 
import { setTimeStamp } from '@/utils/auth.js'
const actions = {
  /* 一、定义函数:用户登录 */
  /* 调用处:点击登录按钮时 */
  async login(context, payload) {
  
    // 1.发请求
    const res = await loginApi(payload)

    // 2. 存登录成功后的token ,token在响应数据res.data中
    context.commit('SET_TOKEN', res.data)
    
    // 3. token过期的主动处理:记下存token时的时间戳
    setTimeStamp()
  }
}

  • request.js中,定义过期时长、判断过期函数
/* src/utils/request.js */
import store from '@/store' 
import { getTimeStamp } from '@/utils/auth'
import router from '@/router'

// 定义过期时长
const TimeOut = 3600 // 单位:秒
// 定义判断过期函数
function checkTimeOut() {
  // 当前时间
  const currentTime = Date.now() 
  // 读取存token时的时间戳
  const timeStamp = getTimeStamp() 
  // 转换为秒后再比较
  const flag = ((currentTime - timeStamp) / 1000) > TimeOut 
  // 返回布尔值
  return flag 
}
  • request.js的请求拦截器中,编写业务逻辑
service.interceptors.request.use(
  (config) => {
    const token = store.getters.token  // 尝试读取token
    if (token) {
      /* token过期的主动处理 */
      if (checkTimeOut()) {
        /* return的flag为false,表示过期 */
        // 触发actions中的logout函数,清空当前过期的token(防止页面跳转错误)、清空用户信息
        store.dispatch('user/logout')
        // 跳转到登录页
        router.push({ path: '/login' })
        // return抛出一个执行错误, 用于终止promise的执行链
        return Promise.reject(new Error('token超时,请重新登录'))
      }
      // 如果token存在,就自动添加到请求头上
      // 注意:使用动态添加属性的形式。
      // 原因:如果headers中的Authorization之前不存在,这样能添加一个新属性;如果headers中的Authorization之前存在,这样能覆盖以前的token值
      config.headers['Authorization'] = `Bearer ${token}`
    }
    return config
  },
  
  (error) => {
    return Promise.reject(error)
  }
)

被动处理

被动处理:主要是后端的活儿,服务端处理token过期问题

思路

  1. 每次请求成功发送后,都会得到服务器的响应。经过后端的判断,如果当前的token失效,那么一定会在响应的数据中携带一个标识。或者说返回一个错误状态码,例如code:233333
  2. token过期属于响应失败,axios响应拦截器中的第二个回调会被触发
  3. 在响应拦截器的第二个回调中,编写token失效的业务逻辑:清除当前的失效token(防止页面无法跳转);跳转到登录页;return一个执行错误,用于终止当前的promise执行链
service.interceptors.response.use(
  (response) => {
      // dosomething
  },
  (error) => {
    // ! 服务器响应失败时,干些事情: 导致响应失败的原因有很多,其中之一是 token 过期
    // 响应失败时的error(错误对象),它经过了axios的2层包装,服务器响应的真实数据在 error.response.data 中。
    // axios包装的提示信息是:error.message,与服务器响应的真实数据是两回事
    const realData = error.response.data
    /* 处理token失效---后端处理 */
    if (error.response && realData && realData.code === 233333) {
      // 以上三个条件全部满足时,才说明token超时
      // 1. 触发actions中的logout函数,清除无效token、当前用户信息
      store.dispatch('user/logout')
      // 2. 跳转到登录页面
      router.push({ path: '/login' })
      // 3. return 一个执行错误,用于终止当前的promise执行链
      return Promise.reject(error)
    } else {
      /*  如果token未失效,则是其他错误 */
      // 1. 提示错误信息
      Message.error(realData.message)
      // 2. return 一个执行错误
      return Promise.reject(error)
    }
  }
)

本文参考我的一个朋友,他的文章也非常值得一看。

原文链接:面试官:说说token失效的处理方式 – 掘金

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/197807.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Vue一到三年面试题总结

    Vue一到三年面试题总结笔者粉丝群里的朋友们多部分的人都在找vue的工作而没有再找react工作,所以我之前总结的html,css,js,react面试题还不行,还要继续拓展vue的。。于是我就把大家在出去面试的时候遇到的vue面试题以粉丝们投稿的方式收集了起来做个汇总,希望能帮助到更多的朋友们~Vue面试题正文:1.vue全家桶包含哪些?答案:vue全家桶与react全家桶介绍2.v-model是什么?怎么使…

  • idea插件安装和推荐插件

    idea插件安装和推荐插件idea安装lombok插件打开settings,进入插件页面,搜索lombok,安装安装完成先别重启,执行下图后重启

  • Unix常用命令

    Unix常用命令moreless:less的作用与more十分相似,都可以用来浏览文字档案的内容,不同的是less允许使用者往回卷动以浏览已经看过的部份,同时因为less并未在一开始就读入整个档案,因此在遇上大型档案的开启时,会比一般的文书编辑器(如vi)来的快速。unix种类[图]>>Linux‖BSD‖Solaris‖SCO‖HP-UX‖AIX‖AS4

  • 三极管驱动继电器电路

    三极管驱动继电器电路    继电器线圈需要流过较大的电流(约50mA)才能使继电器吸合,一般的集成电路不能提供这样大的电流,因此必须进行扩流,即驱动。图1所示为用NPN型三极管驱动继电器的电路图,图中阴影部分为继电器电路,继电器线圈作为集电极负载而接到集电极和正电源之间。当输入为0V时,三极管截止,继电器线圈无电流流过,则继电器释放(OFF);相反,当输入为+VCC时,三极管饱和,继电器线圈有相当的电流流过,…

  • 论文投稿Cover letter[通俗易懂]

    论文投稿Cover letter[通俗易懂]转自:http://blog.sciencenet.cn/blog-479412-686426.html,感谢分享!1.第一次投稿Coverletter:主要任务是介绍文章主要创新以及声明没有一稿多投DearEditors:Wewouldliketosubmittheenclosedmanuscriptentitled“PaperTitle”,whichwewis…

  • Hmily实现TCC事务控制

    Hmily实现TCC事务控制目标通过本案例的学习,掌握Hmily实现TCC事务控制的方法,掌握TCC事务控制的思想。Hmily介绍Hmily是一个高性能分布式事务TCC开源框架。基于Java语言来开发(JDK1.8),支持Dubbo,SpringCloud等RPC框架进行分布式事务。它目前支持以下特性:支持嵌套事务(Nestedtransactionsupport).采用disruptor框架进行事务日志的…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号