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失效的处理方式 – 掘金

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 杭州的旅游景点与民间传说故事「建议收藏」

    杭州的旅游景点与民间传说故事「建议收藏」 杭州的旅游景点与民间传说故事虎跑梦泉虎跑泉是一处以“泉”为主题的观泉、听泉、品泉、试泉的泉源景观,又是以性空、济公、弘一法师传奇故事为特色的人文景观,坐落位于西湖之南的大慈山定慧禅寺内。民间传说唐代性空大师游历此山,这里风景优美,只是无水源,决定去别处,忽然有神人告诉他即将有二只老虎会来挖泉,翌日,果然有二虎跑山出泉,甘冽醇厚,纯净无菌,从此“龙井茶叶虎跑泉”被称为“西湖双绝”。

    2022年5月31日
    34
  • 基于Ubuntu 的 Parrot ARDrone 2.0的SDK安装以及ardrone_autonomy和tum_ardrone的安装和使用

    基于Ubuntu 的 Parrot ARDrone 2.0的SDK安装以及ardrone_autonomy和tum_ardrone的安装和使用经过了一个多星期的摸索,现在开始慢慢理解ParrotARDrone2.0的使用。现在总结一下遇到的问题,希望用这款无人机的人能够得到一些帮助,毕竟不能总是做一个伸手党。ParrotARDrone2.0是法国的一家无人机的厂商生产的无人机的产品,是parrotardrone1.0的进阶版,摸索的这一个星期我感受到现在对ardrone2.0的支持还是挺棒的。有很多资料,遇到问题

    2022年8月15日
    4
  • Redis学习笔记—-Redis5.0.5配置文件详解「建议收藏」

    Redis学习笔记—-Redis5.0.5配置文件详解「建议收藏」4、解析配置文件(redis5.0.5)配置文件在${PATH}/redis.conf4.1、存储#当你需要为某个配置项指定内存大小的时候,必须要带上单位,通常的格式就是1k5gb4m等:#1k=>1000bytes#1kb=>1024bytes#1m=>1000000bytes#1mb=>10241024bytes#1g…

    2022年6月5日
    29
  • 启动Redis报错:Could not create Server TCP listening socket *:6379: bind: Address already in use–解决办法

    启动Redis报错:Could not create Server TCP listening socket *:6379: bind: Address already in use–解决办法最后一句提示:6379地址已经在使用(6379是redis默认的端口)如图我自己输入指令./redis-server显示Redis已经开启服务1)正常解决方法三部①通过指令找到redis进程,查看所有关于它的进程详情。ps-ef|grefredisroot308610Apr24?00:00:07./bin/redis-…

    2022年6月7日
    49
  • pdaf的一些计算「建议收藏」

    pdaf的一些计算「建议收藏」 Pdaf数据获取流程根据上层的isCommand命令,在otp中获取到pdinfo。构建flowcontrolpdaf相关信息的结构体pd_profile,通过sendCommand在snesordriver文件中获取信息pdafcapacity、pdafinfo、vcinfo、cropwininfo。将矫正数据送入PDcore中,会将otp中的pdinfo和driver中进行对比,不一致则报错。在convertPDBufFormat中将pd点统一转换成raw16的格式,

    2022年9月6日
    2
  • Hash Verification哈希值校验工具[通俗易懂]

    Hash Verification哈希值校验工具[通俗易懂]最后更新:2019-2-26HashVerification最新版:HashVerificationV1.0NEW!版本号:V1.0.0.14973大小:21KB/zip格式压缩,63KB/解压后 MD5校验码 SHA1校验码 2ad54536be68bd7446f82da1bd16b113 74610b4cd2fe675d…

    2022年9月13日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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