Vue에서 토큰을 새로 고치는 방법

이 글은 Vue에서 토큰을 새로 고치는 방법을 공유합니다. 내용이 매우 좋습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

토큰 인증 메커니즘

클라이언트 로그인 요청이 성공한 후 서버는 특수 암호를 사용하여 사용자 정보(예: 사용자 ID)를 암호화합니다. 알고리즘은 다음 번에 사용자가 요청을 시작할 때 토큰을 사용자에게 전송합니다. 그런 다음 서버는 확인을 위해 토큰을 해독합니다. 그렇지 않으면 요청이 실패합니다.

Token의 장점

이는 상태 비저장이며 서버는 기존 신원 인증(세션)과 같은 세션 정보를 저장할 필요가 없습니다. 서버에 가해지는 압력을 줄이세요.

vue의 토큰 새로고침 처리

토큰 인증 메커니즘에 대한 간략한 소개 후 텍스트를 입력합니다...
#🎜 🎜#

일반적으로 토큰에는 만료 시간이 설정되어 있는데, 만료 후에는 해당 인터페이스를 요청할 수 없습니다. 이때 바로 로그아웃해야 하나요?

현재 회사의 프로젝트에서는 더 나은 사용자 경험을 위해 토큰을 수동으로 새로 고치는 것을 선택했습니다. 로그인 요청이 성공하면 토큰과 토큰 만료 시간이 반환됩니다. API가 요청될 때마다 프런트 엔드는 토큰이 만료될 예정인지 만료되었는지 여부를 먼저 확인할 수 있습니다. 그렇다면 새로 고침 토큰 인터페이스를 요청하세요. 원래 토큰을 성공적으로 교체한 후에만 요청을 다시 시작할 수 있습니다.

코드를 직접 살펴보겠습니다. 이것은 vue의 요청 인터셉터에서 수행되는 관련 작업입니다.

/*是否有请求正在刷新token*/
window.isRefreshing = false
/*被挂起的请求数组*/
let refreshSubscribers = []

/*获取刷新token请求的token*/
function getRefreshToken () {
 return JSON.parse(localStorage.auth).refresh_token
}

/*push所有请求到数组中*/
function subscribeTokenRefresh (cb) {
 refreshSubscribers.push(cb)
}

/*刷新请求（refreshSubscribers数组中的请求得到新的token之后会自执行，用新的token去请求数据）*/
function onRrefreshed (token) {
 refreshSubscribers.map(cb => cb(token))
}

/*请求拦截器*/
ajax.interceptors.request.use(
 config => {
  const authTmp = localStorage.auth
  /*判断是否已登录*/
  if (authTmp) {
   /*解析登录信息*/
   let auth = JSON.parse(authTmp)
   /*判断auth是否存在*/
   if (auth) {
    /*在请求头中添加token类型、token*/
    config.headers.Authorization = auth.token_type + ' ' + auth.token
    /*判断刷新token请求的refresh_token是否过期*/
    if (util.isRefreshTokenExpired()) {
     alert('刷新token过期，请重新登录')
     /*清除本地保存的auth*/
     localStorage.removeItem('auth')
     window.location.href = '#/login'
     return
    }
    /*判断token是否将要过期*/
    if (util.isTokenExpired() && config.url.indexOf('admin/auth/current') === -1) {
     /*判断是否正在刷新*/
     if (!window.isRefreshing) {
      /*将刷新token的标志置为true*/
      window.isRefreshing = true
      /*发起刷新token的请求*/
      apiList.refreshToken({refresh_token: getRefreshToken()}).then(res => {
       /*将标志置为false*/
       window.isRefreshing = false
       /*成功刷新token*/
       config.headers.Authorization = res.data.data.token_type + ' ' + res.data.data.token
       /*更新auth*/
       localStorage.setItem('auth', JSON.stringify(res.data.data))
       /*执行数组里的函数,重新发起被挂起的请求*/
       onRrefreshed(res.data.data.token)
       /*执行onRefreshed函数后清空数组中保存的请求*/
       refreshSubscribers = []
      }).catch(err => {
       alert(err.response.data.message)
       /*清除本地保存的auth*/
       // localStorage.removeItem('auth')
       window.location.href = '#/login'
      })
     }
     /*把请求(token)=>{....}都push到一个数组中*/
     let retry = new Promise((resolve, reject) => {
      /*(token) => {...}这个函数就是回调函数*/
      subscribeTokenRefresh((token) => {
       config.headers.Authorization = 'Bearer ' + token
       /*将请求挂起*/
       resolve(config)
      })
     })
     return retry
    }
   }
   return config

  } else {
   /*未登录直接返回配置信息*/
   return config
  }
 },
 /*错误操作*/
 err => {
  return Promise.reject(err)
 }
)

여기서 몇 가지 참고할 사항이 있습니다. #🎜 🎜#

1. 토큰이 곧 만료되거나 만료되면 원칙적으로 토큰 새로 고침 요청을 트리거하는 인터페이스만 필요합니다. 여기서 isRefreshing 변수는 이러한 모니터링 역할을 합니다. 기능은 잠금과 동일합니다. 토큰 새로 고침 작업이 트리거되면 다른 트리거 작업이 제외됩니다.

window.isRefreshing = false

2. 새로고침 토큰 인터페이스는 또 다른 토큰(refresh_token)을 사용합니다. 이것도 보안상의 이유로 만료 시간이 있지만 일반적으로 이 만료 시간은 일반 토큰보다 깁니다. 만료 시간이 더 길기 때문에 위 코드에서 요청 가로채기에서 먼저 Refresh_token이 만료되었는지 확인하고 만료되면 다음 단계로 진행하지 않고 바로 로그아웃하는 것을 볼 수 있습니다.

 /*判断刷新token请求的refresh_token是否过期*/
if (util.isRefreshTokenExpired() && config.url.indexOf('admin/auth/current') === -1) {
 alert('刷新token过期，请重新登录')
 /*清除本地保存的auth*/
 localStorage.removeItem('auth')
 window.location.href = '#/login'
 return
}

3. 토큰 새로 고침 작업을 트리거한 후 먼저 다른 요청을 일시 중지하고 새 토큰을 얻은 후 이러한 요청을 다시 시작해야 합니다.

/*把请求(token)=>{....}都push到一个数组中*/
let retry = new Promise((resolve, reject) => {
 /*(token) => {...}这个函数就是回调函数*/
 subscribeTokenRefresh((token) => {
  config.headers.Authorization = 'Bearer ' + token
  /*将请求挂起*/
  resolve(config)
 })
})
return retry

새로고침 토큰 요청의 성공 콜백에서 다음 코드를 실행하고 요청을 다시 시작합니다.

 /*执行数组里的函数,重新发起被挂起的请求*/
 onRrefreshed(res.data.data.token)

4. 누군가가 댓글로 util 파일에 관해 질문했기 때문에 실제로 토큰을 얻을 때 토큰 만료 시간을 확인하는 방법을 알고 싶어할 것입니다. 먼저 설정할 수 있습니다. 먼저 저장했다가 필요할 때 꺼내서 현지 시간과 비교해 보세요

/*判断token是否过期*/
function isTokenExpired() {
 /*从localStorage中取出token过期时间*/
 let expiredTime = new Date(JSON.parse(localStorage.auth).expired_at).getTime() / 1000
 /*获取本地时间*/
 let nowTime = new Date().getTime() / 1000
 /*获取校验时间差*/
 let diffTime = JSON.parse(sessionStorage.diffTime)
 /*校验本地时间*/
 nowTime -= diffTime
 /*如果 < 10分钟，则说明即将过期*/
 return (expiredTime - nowTime) < 10*60
}

관련 추천:

Vue의 SFC 및 vue - 로더의 상세 분석

Vue 상위 구성요소와 하위 구성요소 간에 값을 전송하는 방법

#🎜 🎜##🎜 🎜#

위 내용은 Vue에서 토큰을 새로 고치는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!