一、token 登入鑑權(quán)

jwt：JSON Web Token。是一種認(rèn)證協(xié)議，一般用來(lái)校驗(yàn)請(qǐng)求的身份資訊和身分權(quán)限。由三個(gè)部分組成：Header、Hayload、Signature

header：也就是頭部訊息，是描述這個(gè)token 的基本訊息，json 格式

{
  "alg": "HS256", // 表示簽名的算法，默認(rèn)是 HMAC SHA256（寫(xiě)成 HS256）
  "type": "JWT" // 表示Token的類型，JWT 令牌統(tǒng)一寫(xiě)為JWT
}

payload：載荷，也是一個(gè)JSON 對(duì)象，用來(lái)存放實(shí)際需要傳遞的資料。不建議存放敏感資訊，例如密碼。

{
  "iss": "a.com", // 簽發(fā)人
  "exp": "1d", // expiration time 過(guò)期時(shí)間
  "sub": "test", // 主題
  "aud": "", // 受眾
  "nbf": "", // Not Before 生效時(shí)間
  "iat": "", // Issued At 簽發(fā)時(shí)間
  "jti": "", // JWT ID 編號(hào)
  // 可以定義私有字段
  "name": "",
  "admin": ""
}

Signature 簽名 是對(duì)前兩部分的簽名，防止資料被竄改。需要指定一個(gè)密鑰。這個(gè)密鑰只有伺服器才知道，不能外洩。使用 Header 裡面指定的簽名演算法，依照公式產(chǎn)生簽名。

算出簽名後，把 Header、Payload、Signature 三個(gè)部分拼成的一個(gè)字串，每個(gè)部分之間用 . 分隔。這樣就產(chǎn)生了一個(gè)token

二、何為雙token

• #accessToken:使用者取得資料權(quán)限

• #refreshToken

  :用來(lái)取得新的accessToken

• 雙token 驗(yàn)證機(jī)制，其中accessToken 過(guò)期時(shí)間較短，refreshToken 過(guò)期時(shí)間較長(zhǎng)。當(dāng) accessToken 過(guò)期後，使用 refreshToken 去請(qǐng)求新的 token。

雙 token 驗(yàn)證流程

使用者登入向服務(wù)端傳送帳號(hào)密碼，登入失敗傳回客戶端重新登入。登入成功服務(wù)端產(chǎn)生 accessToken 和 refreshToken，傳回產(chǎn)生的 token 給客戶端。
在請(qǐng)求攔截器中，請(qǐng)求頭中攜帶 accessToken 請(qǐng)求數(shù)據(jù)，服務(wù)端驗(yàn)證 accessToken 是否過(guò)期。 token 有效繼續(xù)請(qǐng)求數(shù)據(jù)，token 失效返回失效訊息到客戶端。
客戶端收到服務(wù)端發(fā)送的請(qǐng)求訊息，在二次封裝的 axios 的回應(yīng)攔截器中判斷是否有 accessToken 失效的訊息，沒(méi)有回傳回應(yīng)的資料。有失效的訊息，就攜帶 refreshToken 請(qǐng)求新的 accessToken。

服務(wù)端驗(yàn)證 refreshToken 是否有效。有效，重新產(chǎn)生 token， 傳回新的 token 和提示訊息到客戶端，無(wú)效，傳回?zé)o效訊息給客戶端。

客戶端回應(yīng)攔截器判斷回應(yīng)訊息是否有 refreshToken 有效無(wú)效。無(wú)效，登出目前登入。有效，重新儲(chǔ)存新的 token，繼續(xù)請(qǐng)求上一次要求的資料。

注意事項(xiàng)

短token失效，服務(wù)端拒絕請(qǐng)求，返回token失效訊息，前端請(qǐng)求到新的短token如何再次請(qǐng)求數(shù)據(jù)，達(dá)到無(wú)感刷新的效果。

服務(wù)端白名單，成功登入前是還沒(méi)有請(qǐng)求到token的，那麼如果服務(wù)端攔截請(qǐng)求，就無(wú)法登入?？脱u化白名單，讓登入無(wú)需進(jìn)行token驗(yàn)證。

三、服務(wù)端程式碼

#1. 建立koa2伺服器

全域安裝koa腳手架

npm install koa-generator -g

建立服務(wù)端直接koa2專案名稱

koa2 server

cd server 進(jìn)入到專案安裝jwt

npm i jsonwebtoken

為了方便直接在服務(wù)端使用koa-cors 跨網(wǎng)域

npm i koa-cors

在app.js中引入應(yīng)用程式cors

const cors=require('koa-cors')
...
app.use(cors())

2. 雙token

新utils/token.js

const jwt=require('jsonwebtoken')

const secret='2023F_Ycb/wp_sd'  // 密鑰
/*
expiresIn:5 過(guò)期時(shí)間，時(shí)間單位是秒
也可以這么寫(xiě) expiresIn:1d 代表一天 
1h 代表一小時(shí)
*/
// 本次是為了測(cè)試，所以設(shè)置時(shí)間 短token5秒 長(zhǎng)token15秒
const accessTokenTime=5  
const refreshTokenTime=15 

// 生成accessToken
const setAccessToken=(payload={})=>{  // payload 攜帶用戶信息
    return jwt.sign(payload,secret,{expireIn:accessTokenTime})
}
//生成refreshToken
const setRefreshToken=(payload={})=>{
    return jwt.sign(payload,secret,{expireIn:refreshTokenTime})
}

module.exports={
    secret,
    setAccessToken,
    setRefreshToken
}

3. 路由

直接使用腳手架建立的專案已經(jīng)在app.js使用了路由中間件在router/index.js 建立介面

const router = require('koa-router')()
const jwt = require('jsonwebtoken')
const { getAccesstoken, getRefreshtoken, secret }=require('../utils/token')

/*登錄接口*/
router.get('/login',()=>{
    let code,msg,data=null
    code=2000
    msg='登錄成功，獲取到token'
    data={
        accessToken:getAccessToken(),
        refreshToken:getReferToken()
    }
    ctx.body={
        code,
        msg,
        data
    }
})

/*用于測(cè)試的獲取數(shù)據(jù)接口*/
router.get('/getTestData',(ctx)=>{
    let code,msg,data=null
    code=2000
    msg='獲取數(shù)據(jù)成功'
    ctx.body={
        code,
        msg,
        data
    }
})

/*驗(yàn)證長(zhǎng)token是否有效，刷新短token
  這里要注意，在刷新短token的時(shí)候回也返回新的長(zhǎng)token，延續(xù)長(zhǎng)token，
  這樣活躍用戶在持續(xù)操作過(guò)程中不會(huì)被迫退出登錄。長(zhǎng)時(shí)間無(wú)操作的非活
  躍用戶長(zhǎng)token過(guò)期重新登錄
*/
router.get('/refresh',(ctx)=>{
    let code,msg,data=null
    //獲取請(qǐng)求頭中攜帶的長(zhǎng)token
    let r_tk=ctx.request.headers['pass']
    //解析token 參數(shù) token 密鑰 回調(diào)函數(shù)返回信息
    jwt.verify(r_tk,secret,(error)=>{
        if(error){
            code=4006,
            msg='長(zhǎng)token無(wú)效，請(qǐng)重新登錄'
        } else{
            code=2000,
            msg='長(zhǎng)token有效，返回新的token'，
            data={
                accessToken:getAccessToken(),
                refreshToken:getReferToken()
            }
        }
    })
})

4. 應(yīng)用中間件

utils/auth.js

const { secret } = require('./token')
const jwt = require('jsonwebtoken')

/*白名單，登錄、刷新短token不受限制，也就不用token驗(yàn)證*/
const whiteList=['/login','/refresh']
const isWhiteList=(url,whiteList)=>{
        return whiteList.find(item => item === url) ? true : false
}

/*中間件
 驗(yàn)證短token是否有效
*/
const cuth = async (ctx,next)=>{
    let code, msg, data = null
    let url = ctx.path
    if(isWhiteList(url,whiteList)){
        // 執(zhí)行下一步
        return await next()
    } else {
        // 獲取請(qǐng)求頭攜帶的短token
        const a_tk=ctx.request.headers['authorization']
        if(!a_tk){
            code=4003
            msg='accessToken無(wú)效，無(wú)權(quán)限'
            ctx.body={
                code,
                msg,
                data
            }
        } else{
            // 解析token
            await jwt.verify(a_tk,secret.(error)=>{
                if(error)=>{
                      code=4003
                      msg='accessToken無(wú)效，無(wú)權(quán)限'
                      ctx.body={
                          code,
                          msg,
                          datta
                      }
                } else {
                    // token有效
                    return await next()
                }
            })
        }
    }
}
module.exports=auth

在app.js中引入應(yīng)用中間件

const auth=requier(./utils/auth)
···
app.use(auth)

其實(shí)如果只是做一個(gè)簡(jiǎn)單的雙token驗(yàn)證，很多中間件是沒(méi)必要的，例如解析靜態(tài)資源。不過(guò)為了節(jié)省時(shí)間，方便就直接使用了koa2鷹架。

最終目錄結(jié)構(gòu)：

四、前端程式碼

1. Vue3 Vite框架

#前端使用了Vue3 Vite的框架，看個(gè)人使用習(xí)慣。

npm init vite@latest client_side

安裝axios

npm i axios

2. 定義使用到的常數(shù)

config/constants.js

export const ACCESS_TOKEN = 'a_tk' // 短token字段
export const REFRESH_TOKEN = 'r_tk' // 短token字段
export const AUTH = 'Authorization'  // header頭部 攜帶短token
export const PASS = 'pass' // header頭部 攜帶長(zhǎng)token

3. 儲(chǔ)存、呼叫過(guò)期請(qǐng)求

###關(guān)鍵點(diǎn)：把攜帶過(guò)期token的請(qǐng)求，利用Promise存在數(shù)組中，保持pending狀態(tài)，也就是不呼叫resolve()。當(dāng)獲取到新的token，再重新請(qǐng)求。 utils/refresh.js###

export {REFRESH_TOKEN,PASS} from '../config/constants.js'
import { getRefreshToken, removeRefreshToken, setAccessToken, setRefreshToken} from '../config/storage'

let subsequent=[]
let flag=false // 設(shè)置開(kāi)關(guān)，保證一次只能請(qǐng)求一次短token，防止客戶多此操作，多次請(qǐng)求

/*把過(guò)期請(qǐng)求添加在數(shù)組中*/
export const addRequest = (request) => {
    subscribes.push(request)
}

/*調(diào)用過(guò)期請(qǐng)求*/
export const retryRequest = () => {
    console.log('重新請(qǐng)求上次中斷的數(shù)據(jù)');
    subscribes.forEach(request => request())
    subscribes = []
}

/*短token過(guò)期，攜帶token去重新請(qǐng)求token*/
export const refreshToken=()=>{
    if(!flag){
        flag = true;
        let r_tk = getRefershToken() // 獲取長(zhǎng)token
        if(r_tk){
            server.get('/refresh',Object.assign({},{
                headers:{[PASS]=r_tk}
            })).then((res)=>{
                //長(zhǎng)token失效，退出登錄
                if(res.code===4006){
                    flag = false
                    removeRefershToken(REFRESH_TOKEN)
                } else if(res.code===2000){
                    // 存儲(chǔ)新的token
                    setAccessToken(res.data.accessToken)
                    setRefreshToken(res.data.refreshToken)
                    flag = false
                    // 重新請(qǐng)求數(shù)據(jù)
                    retryRequest()
                }
            })
        }
    }
}

###4. 封裝 axios######utlis/server.js###

import axios from "axios";
import * as storage from "../config/storage"
import * as constants from '../config/constants'
import { addRequest, refreshToken } from "./refresh";

const server = axios.create({
    baseURL: 'http://localhost:3004', // 你的服務(wù)器
    timeout: 1000 * 10,
    headers: {
        "Content-type": "application/json"
    }
})

/*請(qǐng)求攔截器*/
server.interceptors.request.use(config => {
    // 獲取短token，攜帶到請(qǐng)求頭，服務(wù)端校驗(yàn)
    let aToken = storage.getAccessToken(constants.ACCESS_TOKEN)
    config.headers[constants.AUTH] = aToken
    return config
})

/*響應(yīng)攔截器*/
server.interceptors.response.use(
    async response => {
        // 獲取到配置和后端響應(yīng)的數(shù)據(jù)
        let { config, data } = response
        console.log('響應(yīng)提示信息：', data.msg);
        return new Promise((resolve, reject) => {
            // 短token失效
            if (data.code === 4003) {
                // 移除失效的短token
                storage.removeAccessToken(constants.ACCESS_TOKEN)
                // 把過(guò)期請(qǐng)求存儲(chǔ)起來(lái)，用于請(qǐng)求到新的短token，再次請(qǐng)求，達(dá)到無(wú)感刷新
                addRequest(() => resolve(server(config)))
                // 攜帶長(zhǎng)token去請(qǐng)求新的token
                refreshToken()
            } else {
                // 有效返回相應(yīng)的數(shù)據(jù)
                resolve(data)
            }

        })

    },
    error => {
        return Promise.reject(error)
    }
)

###5. 復(fù)用封裝###

import * as constants from "./constants"

// 存儲(chǔ)短token
export const setAccessToken = (token) => localStorage.setItem(constanst.ACCESS_TOKEN, token)
// 存儲(chǔ)長(zhǎng)token
export const setRefershToken = (token) => localStorage.setItem(constants.REFRESH_TOKEN, token)
// 獲取短token
export const getAccessToken = () => localStorage.getItem(constants.ACCESS_TOKEN)
// 獲取長(zhǎng)token
export const getRefershToken = () => localStorage.getItem(constants.REFRESH_TOKEN)
// 刪除短token
export const removeAccessToken = () => localStorage.removeItem(constants.ACCESS_TOKEN)
// 刪除長(zhǎng)token
export const removeRefershToken = () => localStorage.removeItem(constants.REFRESH_TOKEN)

###6. 介面封裝######apis/index.js###

import server from "../utils/server";
/*登錄*/
export const login = () => {
    return server({
        url: '/login',
        method: 'get'
    })
}
/*請(qǐng)求數(shù)據(jù)*/
export const getData = () => {
    return server({
        url: '/getList',
        method: 'get'
    })
}

###專案運(yùn)行################最後的最後，執(zhí)行項(xiàng)目，查看效果後端設(shè)定的短token5秒，長(zhǎng)token10秒。登入請(qǐng)求到token後，請(qǐng)求資料可以正常請(qǐng)求，五秒後再次請(qǐng)求，短token失效，這時(shí)長(zhǎng)token有效，請(qǐng)求到新的token，refresh介面只呼叫了一次。長(zhǎng)token也過(guò)期後，就需要重新登入啦。 ############

以上是Vue3+Vite怎麼使用雙token實(shí)現(xiàn)無(wú)感刷新的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！