vue+axiosがJWTを使用する場合、refreshTokenを使用してassetsTokenを再表示し、前のリクエストを続行するにはどうすればいいですか?前のデータを返しますか?
4287 ワード
jwtとは
簡単に言えば暗号化トークンであり、サービス側はアルゴリズムを通じてユーザー情報を暗号化し、要求とそれに応じて転送することができ、さらにサービス側にログインしている人が誰なのか、彼が私のサーバーに入って情報を取得する権限があるかどうかを知ることができる.jwtの詳細な実装方法はここでは説明しませんが、興味のあるパートナーは、jwtに関する詳細な知識JWTスタンプを下のリンクで知ることができます.
なぜ、どうやってtokenを更新するのか
私たちはjwtを使用する過程で、まず2つのtokenに接触します.1つはaccessTokenで、もう1つはrefreshTokenです.次はatとrtで簡単に書きます.atとrtには対応する期限があります.atが期限切れになったとき、rt呼び出しインタフェースを使って新しいatとrtを取得します.では、私たちはどこに保存しますか.私が選んだのはlocalstroageに保存することです.初めて取得したtokenはログイン時に手に入れたはずです.それからずっとlocalstroageに保存しています.要求するたびにatを要求ヘッダauthに置いて、要求とそれに応じてJWTインタラクションを実現することができます.前述したように、at、rtには対応する期限があります.atが期限切れになった後、rt呼び出しインタフェースを通じて新しいatとrtを取得する必要があります.rtを使用するとき、rtが期限切れになったらどうしますか.rtが期限切れになると、ユーザーが長時間操作していないことを示し、loginページにジャンプして再ログインする必要があります.
この過程で何か問題がありますか.
rtを使用してtokenをリフレッシュする場合、ユーザーが現在要求している場合、今回の要求はtokenの期限切れで失敗し、フロントエンドにプロンプトがある場合は、現在のtokenが期限切れであることをプロンプトし、次の操作が分からない可能性があります.フロントエンドはこの時点でtokenをリフレッシュして、前のリクエストを継続するか、あるいははっきり言って、tokenをリフレッシュするステップはユーザーにとって無感であるべきで、ユーザーは知らないうちにtokenをリフレッシュして欲しいデータを手に入れるべきだが、今は明らかにそうではない.期限切れのエラーリクエストが終了したため、ユーザーは何が起こったのか分からない.
私の解決策
1つ目はvueプロジェクトのためaxiosを使用してリクエストを送信し、最初の時間にブロッカー、ブロッカー--atリフレッシュステータスコードをブロック--tokenをリフレッシュ--?そして、リクエストを送信します.しかし、私はこの方法を使って、だめです.もっと良い方法があるかもしれませんが、大神たちに第2の中間層を指導してください.くだらないことを言わずにコードを貼ってください.
サーバをexpressで開き、axiosはリクエストを送信するために使用され、corsはドメイン間(同じサーバ上にないため)qsfs解析bodyを構成します.
4000ポート、use各プラグインの指定
私はただこのようにするだけで、みんなはどんなもっと良い方法があって下で交流することができます!
簡単に言えば暗号化トークンであり、サービス側はアルゴリズムを通じてユーザー情報を暗号化し、要求とそれに応じて転送することができ、さらにサービス側にログインしている人が誰なのか、彼が私のサーバーに入って情報を取得する権限があるかどうかを知ることができる.jwtの詳細な実装方法はここでは説明しませんが、興味のあるパートナーは、jwtに関する詳細な知識JWTスタンプを下のリンクで知ることができます.
なぜ、どうやってtokenを更新するのか
私たちはjwtを使用する過程で、まず2つのtokenに接触します.1つはaccessTokenで、もう1つはrefreshTokenです.次はatとrtで簡単に書きます.atとrtには対応する期限があります.atが期限切れになったとき、rt呼び出しインタフェースを使って新しいatとrtを取得します.では、私たちはどこに保存しますか.私が選んだのはlocalstroageに保存することです.初めて取得したtokenはログイン時に手に入れたはずです.それからずっとlocalstroageに保存しています.要求するたびにatを要求ヘッダauthに置いて、要求とそれに応じてJWTインタラクションを実現することができます.前述したように、at、rtには対応する期限があります.atが期限切れになった後、rt呼び出しインタフェースを通じて新しいatとrtを取得する必要があります.rtを使用するとき、rtが期限切れになったらどうしますか.rtが期限切れになると、ユーザーが長時間操作していないことを示し、loginページにジャンプして再ログインする必要があります.
この過程で何か問題がありますか.
rtを使用してtokenをリフレッシュする場合、ユーザーが現在要求している場合、今回の要求はtokenの期限切れで失敗し、フロントエンドにプロンプトがある場合は、現在のtokenが期限切れであることをプロンプトし、次の操作が分からない可能性があります.フロントエンドはこの時点でtokenをリフレッシュして、前のリクエストを継続するか、あるいははっきり言って、tokenをリフレッシュするステップはユーザーにとって無感であるべきで、ユーザーは知らないうちにtokenをリフレッシュして欲しいデータを手に入れるべきだが、今は明らかにそうではない.期限切れのエラーリクエストが終了したため、ユーザーは何が起こったのか分からない.
私の解決策
1つ目はvueプロジェクトのためaxiosを使用してリクエストを送信し、最初の時間にブロッカー、ブロッカー--atリフレッシュステータスコードをブロック--tokenをリフレッシュ--?そして、リクエストを送信します.しかし、私はこの方法を使って、だめです.もっと良い方法があるかもしれませんが、大神たちに第2の中間層を指導してください.くだらないことを言わずにコードを貼ってください.
// require
const express = require('express')
const app = express()
const axios = require('axios')
const cors = require('cors')
let bodyParser = require('body-parser')
let qs = require('qs')
let fs = require('fs')
サーバをexpressで開き、axiosはリクエストを送信するために使用され、corsはドメイン間(同じサーバ上にないため)qsfs解析bodyを構成します.
var colors = require('colors');
// use
app.use(cors())
app.use(bodyParser.json())
app.use(
bodyParser.urlencoded({
extended: false
})
)
const port = 4000
4000ポート、use各プラグインの指定
// router
app.post('*', function (request, response, next) {
var path = request.path
//
axios
.post('http://192.168.35.161:8000' + path, qs.stringify(request.body), {
headers: {
authorization: request.headers.authorization || '',
name: request.headers.name || ''
}
})
.then(res => {
// ,70003, token
if (res.data.statusCode === 70003) {
// token
axios
.post(
'http://192.168.35.161:8000/user-search/updateToken',
qs.stringify({
id: request.headers.id
}), {
headers: {
authorization: request.headers.auth,
name: request.headers.name
}
}
)
.then(function (res2) {
// token
if (res2.data.statusCode === 70005) {
//70005
axios.post('http://192.168.35.161:8000' + path, qs.stringify(request.body), {
headers: {
authorization: res2.data.data.accessToken,
name: request.headers.name
}
}).then(res3 => {
// token , , at rt ,
res3.data.refreshTokenData = {
accessToken: res2.data.data.accessToken,
refreshToken: res2.data.data.refreshToken
}
response.status(res3.status).send(res3.data)
}).catch(error => {
//
response.status(error.response.data.status).send(error.response.data)
})
} else {
//
response.status(res.status).send(res.data)
}
})
.catch(function (error) {
//
response.status(error.response.data.status).send(error.response.data)
})
} else {
//
response.status(res.status).send(res.data)
}
}).catch(error => {
//
console.log(error)
//
response.status(error.response.data.status).send(error.response.data)
})
})
app.listen(port, () => console.log(' , ' + port + ' !'))
私はただこのようにするだけで、みんなはどんなもっと良い方法があって下で交流することができます!