Vueでトークンを更新する方法

この記事では、Vue でトークンを更新する方法について説明します。困っている人はぜひ参考にしてください。

トークン認証メカニズム

クライアントのログイン要求が成功すると、サーバーは特別なアルゴリズムを使用してユーザー情報 (ユーザー ID など) を暗号化し、それを検証署名としてユーザー (つまり、トークン) に送信します。ユーザーが次回リクエストを開始すると、このトークンが渡され、サーバーはトークンを復号化して検証し、それが成功した場合、リクエストされたデータがクライアントに返されます。そうでない場合、リクエストは失敗します。

トークンの利点

ステートレスであり、サーバーは従来の本人認証（セッション）のようにセッション情報を保存する必要がないため、サーバーへの負荷が軽減されます。

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-loader の詳細な分析

vue 間で値を転送する方法親コンポーネントと子コンポーネント

以上がVueでトークンを更新する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。