开发者社区> 欧阳呀> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

token系统讲解及过期处理

简介: 笔记
+关注继续查看

40.png


这玩意很简单,记录一下吧,给入门的小白用下


1. token是什么?用来做什么



token通常译为令牌,暗号。举个例子:我是古时候皇城中大内的高手(看门的大爷),进皇宫需要皇帝发的特制令牌,没有指定的令牌是不能进的,我会把你拦住,说不定还会把你胖揍一顿。皇宫在这里就相当于我们项目,为了项目的安全性,设置了这个token,进项目的人都需要有这个玩意,证明你有这个权限。

token是怎么生成的? 通过哈希算法(不常用)、uuid(雪花算法,可保持全球唯一性),jwt工具等生成随机字符串(也可能会拼接上用户的一些信息)

为什么token要有有效期?而且设置得这么短? 为了提高token的安全性,不能永久有效,降低被别人劫持的风险

有时候登录的时候为什么会有多个token?

1. 常规 token:使用频繁,有效期比较短

2. refresh_token:当token过期的时候,用来得到新的token的,使用不频繁,有效期比较长(一般为一个月)

我们怎么知道token过期了? 通过调接口时返回的状态码,如果状态码是401(一般情况下),就说明没有携带token,或者token过期了


41.png


2. token存储在哪?过期了怎么办?


token由服务端生成,通过接口传给前端。

一般在登录接口会给token值。

存储看具体的项目场景,一般存储在本地缓存里,有两种方案供君选择:

sessionStorage(会话级别,网页一关就歇逼了)

localStorage(永久的,需要手动去清除)

token过期处理

重新登录 => 清空token,跳转登录页

refresh_token => 得到一个全新的token


3. 请求拦截与响应拦截执行时机(面试重点)


这玩意面试问的多,看图很清晰:

42.png请求拦截器执行时机:axios调用之后,浏览器真正发起请求之前

响应拦截器执行时机:浏览器接受到响应数据之后,axios拿到数据之前


4. 解决token过期方案一: 重新登录


知道出现了401的错误: 使用响应拦截器

进行页面的跳转

此种方案用户体验不是很好(目前大部分企业及项目都这么干)

import store from '@/store'

// 响应拦截器
request.interceptors.response.use(
  function (response) {
    // 响应成功(响应状态码是 2xx)时执行第一个回调函数
    console.log('响应成功....')
    return response
  }, function (error) {
    // 网络异常或响应失败(响应状态码是非2开头)时执行第二个回调函数
    console.log('响应失败....')
    // 1. 判断响应的状态码是不是401,如果不是401就不用做任何处理
    if (error.response && error.response.status === 401) {
      // 2. 如果是401,就先清空token, 并跳转到登录页
      store.commit('setUser', null)
      router.push('/login')
    }
    return Promise.reject(error)
  }
)


5. 方案二:使用 refresh_token 方案


判断有没有refresh_token,如果没有跳转登录页

如果有refresh_token,调用刷新token的接口,拿到新的token

更新vuex和loaclStoreage存储的token

为原来调用接口方,重新去调用接口

如果利用refresh_token,刷新token的接口失败,则还是跳转到登录页

附上了详细的注释,讲道理大佬们应该看得懂

import axios from 'axios'
import store from '@/store'
import router from '@/router'

const baseURL = 'http://xxx.xxx.net/'

const request = axios.create({
  baseURL // 接口的基准路径
})

// 请求拦截器
// Add a request interceptor
request.interceptors.request.use(function (config) {
  // 请求发起会经过这里
  // config:本次请求的请求配置对象
  const { user } = store.state
  if (user && user.token) {
    config.headers.Authorization = `Bearer ${user.token}`
  } 
  // 注意:这里务必要返回 config 配置对象,否则请求就停在这里出不去了
  return config
}, function (error) {
  // 如果请求出错了(还没有发出去)会进入这里
  return Promise.reject(error)
})

request.interceptors.response.use(
  function (response) {
    // 响应成功(响应状态码是 2xx)时执行第一个回调函数
    return response
  }, async function (error) {
    // 网络异常或响应失败(响应状态码是非2开头)时执行第二个回调函数
    console.log('响应失败时执行的代码....')
    if (error.response && error.response.status === 401) {
      const user = store.state.user
      if (user && user.refresh_token) {
        // 1. 判断有没有refresh_token,如果没有跳转登录页
        // 2. 如果有refresh_token,调用刷新token的接口,拿到新的token
        try {
          var res = await axios({
            baseURL: baseURL,
            method: 'PUT',
            url: '/xxx/xxx',
            headers: {
              Authorization: `Bearer ${user.refresh_token}`
            }
          })
        } catch {
          // 5. 如果refresh_token过期,进行清空token并跳转到登录页的处理
          store.commit('setUser', null)
          router.push('/login')
        }

        //  3. 更新vuex和loaclStoreage存储的token
        store.commit('setUser', {
          refresh_token: user.refresh_token,
          token: res.data.data.token
        })
        //    4. 为原来调用接口方,重新去调用接口
        console.log(error.config)
        return request(error.config)
      } else {
        // 1. 判断有没有refresh_token,如果没有跳转登录页
        store.commit('setUser', null)
        router.push('/login')
      }
    }

    // 3. 如果利用refresh_token,刷新token的接口失败,则还是跳转到登录页
    // eslint-disable-next-line prefer-promise-reject-errors
    return Promise.reject(error)
  }
)

export default request


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
关于JWT Token 自动续期的解决方案
在前后端分离的开发模式下,前端用户登录成功后后端服务会给用户颁发一个jwt token。前端(如vue)在接收到jwt token后会将token存储到LocalStorage中。
0 0
OkHttp实现全局过期token自动刷新
问题 一次面试遇到的一个问题,其实也是实际开发中很容易遇到的问题,特此记录一下。 当请求某个接口的时候,我们会在请求的header中携带token消息,但是发现token失效,接口请求报错,怎么马上刷新token,然后重复请求方才那个接口呢?这个过程应该说对用户来说是无感的。
1305 0
SAP Spartacus localStorage 里存储的 auth Token 过期时间
SAP Spartacus localStorage 里存储的 auth Token 过期时间
0 0
登录凭证(cookie+session和Token令牌)
登录凭证(cookie+session和Token令牌)
0 0
JWT令牌如何将令牌token转换为登录者的信息的?
java项目的权限认证系统大家都熟悉,之前本人也用到过几种认证token的方式,其中JWT是我觉得最神秘的一种,因为我一直没搞明白,在认证完成后,访问业务接口时,接口是怎么把请求头中的token转换为接口中的用户信息的,直到HandlerMethodArgumentResolver这个接口进入我的视野。
0 0
聊聊 OAuth 2.0 的 Token 续期处理
Token 校验逻辑 // CheckTokenEndpoint.checkToken @RequestMapping(value = "/oauth/check_token") @ResponseBody public Map checkToken(@RequestPara.
970 0
快速理解 session/token/cookie 认证方式
目录 目录 cookie session token cookie Web Application 一般以 HTTP 协议作为传输协议, 但 HTTP 协议是无状态的.
761 0
Token验证失败
Token验证失败 微信 微信公众平台开发 Token校验失败 URL Token原文 http://www.cnblogs.com/txw1958/p/token-verify.html    Token验证失败的解决方法   一、问题由来 在使用URL和Token启用微信公众平台开发模式消息接口的时候,我们会碰到下面三种情况  1. token校验失败 这样回头检查一下各项配置是否正确。
2080 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载