Wie Vue3+Vite zwei Token verwendet, um eine sinnlose Aktualisierung zu erreichen

1. Token-Anmeldeauthentifizierung

jwt: JSON Web Token. Dabei handelt es sich um ein Authentifizierungsprotokoll, das im Allgemeinen zur Überprüfung der angeforderten Identitätsinformationen und Identitätsberechtigungen verwendet wird. Besteht aus drei Teilen: Header, Hayload, Signatur

Header: Das heißt, Header-Informationen, die die grundlegenden Informationen zur Beschreibung dieses Tokens sind, JSON-Format

{
  "alg": "HS256", // 表示签名的算法，默认是 HMAC SHA256（写成 HS256）
  "type": "JWT" // 表示Token的类型，JWT 令牌统一写为JWT
}

Payload: Payload, bei der es sich auch um ein JSON-Objekt handelt, das zum Speichern der tatsächlichen Daten verwendet wird das muss übermittelt werden. Es wird nicht empfohlen, vertrauliche Informationen wie Passwörter zu speichern.

{
  "iss": "a.com", // 签发人
  "exp": "1d", // expiration time 过期时间
  "sub": "test", // 主题
  "aud": "", // 受众
  "nbf": "", // Not Before 生效时间
  "iat": "", // Issued At 签发时间
  "jti": "", // JWT ID 编号
  // 可以定义私有字段
  "name": "",
  "admin": ""
}

Signatur ist eine Signatur der ersten beiden Teile, um zu verhindern, dass Daten manipuliert werden. Es muss ein Schlüssel angegeben werden. Dieser Schlüssel ist nur dem Server bekannt und kann nicht weitergegeben werden. Verwenden Sie den im Header angegebenen Signaturalgorithmus, um eine Signatur gemäß der Formel zu generieren.

Fügen Sie nach der Berechnung der Signatur die drei Teile Header, Payload und Signatur zu einer Zeichenfolge zusammen und trennen Sie jeden Teil durch . Dadurch wird ein Token generiert

2. Was ist ein Doppel-Token?

• Doppelter Token-Verifizierungsmechanismus, bei dem AccessToken eine kürzere Ablaufzeit und RefreshToken eine längere Ablaufzeit hat. Wenn das AccessToken abläuft, fordern Sie mit RefreshToken ein neues Token an. accessToken:用户获取数据权限

• refreshToken

  Doppelter Token-Verifizierungsprozess

Der Benutzer meldet sich an und sendet das Kontokennwort an den Server. Wenn die Anmeldung fehlschlägt, kehren Sie zum Client zurück, um sich erneut anzumelden. Nach erfolgreicher Anmeldung generiert der Server ein AccessToken und ein RefreshToken und gibt das generierte Token an den Client zurück.

• Im Anforderungs-Interceptor trägt der Anforderungsheader die AccessToken-Anforderungsdaten und der Server überprüft, ob das AccessToken abgelaufen ist. Wenn das Token gültig ist, fordern Sie weiterhin Daten an. Wenn das Token ungültig ist, werden Informationen zur Ungültigkeit an den Client zurückgegeben.

• Der Client empfängt die vom Server gesendeten Anforderungsinformationen und stellt fest, ob im doppelt gekapselten Axios-Antwort-Interceptor Informationen zur AccessToken-Ungültigmachung vorhanden sind, es werden jedoch keine Antwortdaten zurückgegeben. Wenn ungültige Informationen vorhanden sind, fordern Sie mit RefreshToken ein neues AccessToken an.

• Der Server überprüft, ob das RefreshToken gültig ist. Wenn es gültig ist, wird das Token neu generiert und die neuen Token- und Eingabeaufforderungsinformationen werden an den Client zurückgegeben. Wenn es ungültig ist, werden ungültige Informationen an den Client zurückgegeben.

• Der Client-Antwort-Interceptor bestimmt, ob die Antwortinformationen über ein gültiges oder ungültiges RefreshToken verfügen. Ungültig, melden Sie sich von der aktuellen Anmeldung ab. Gültig, speichern Sie das neue Token erneut und fordern Sie weiterhin die Daten der letzten Anfrage an.

• Hinweise

Der Server lehnt die Anfrage ab und gibt die Informationen zur Token-Ungültigmachung zurück auffrischen.

• Server-Whitelist, das Token wurde vor erfolgreicher Anmeldung nicht angefordert. Wenn der Server die Anfrage also abfängt, können Sie sich nicht anmelden. Passen Sie die Whitelist so an, dass für die Anmeldung keine Token-Verifizierung erforderlich ist.

• 3. Servercode
  1. Koa-Server erstellen

Koa-Gerüst global installieren

npm install koa-generator -g

Erstellen Sie den Server direkt koa2+ Projektname

koa2 server

cd-Server und geben Sie das Projekt ein, um jwt zu installieren

npm i jsonwebtoken

im Dienst Verwenden Sie am Ende koa-cors domänenübergreifend.

npm i koa-cors

Führen Sie Anwendungs-Cors in app.js ein Die direkte Verwendung von Gerüsten ist bereits in der App enthalten. .js verwendet Routing-Middleware, um eine Schnittstelle in router/index.js

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

4 zu erstellen Wenn Sie nur eine einfache Doppel-Token-Überprüfung durchführen, sind viele Middlewares nicht erforderlich, z. B. das Parsen statischer Ressourcen. Um jedoch Zeit und Komfort zu sparen, habe ich direkt das Gerüst koa2 verwendet.

Endgültige Verzeichnisstruktur:

IV. Frontend-Code

1. Vue3+Vite-Framework

Das Frontend verwendet das Vue3+Vite-Framework, es hängt von den persönlichen Nutzungsgewohnheiten ab.

const jwt=require('jsonwebtoken')

const secret='2023F_Ycb/wp_sd'  // 密钥
/*
expiresIn:5 过期时间，时间单位是秒
也可以这么写 expiresIn:1d 代表一天 
1h 代表一小时
*/
// 本次是为了测试，所以设置时间 短token5秒 长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
}

Installieren Sie axios

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
    }
})

/*用于测试的获取数据接口*/
router.get('/getTestData',(ctx)=>{
    let code,msg,data=null
    code=2000
    msg='获取数据成功'
    ctx.body={
        code,
        msg,
        data
    }
})

/*验证长token是否有效，刷新短token
  这里要注意，在刷新短token的时候回也返回新的长token，延续长token，
  这样活跃用户在持续操作过程中不会被迫退出登录。长时间无操作的非活
  跃用户长token过期重新登录
*/
router.get('/refresh',(ctx)=>{
    let code,msg,data=null
    //获取请求头中携带的长token
    let r_tk=ctx.request.headers['pass']
    //解析token 参数 token 密钥 回调函数返回信息
    jwt.verify(r_tk,secret,(error)=>{
        if(error){
            code=4006,
            msg='长token无效，请重新登录'
        } else{
            code=2000,
            msg='长token有效，返回新的token'，
            data={
                accessToken:getAccessToken(),
                refreshToken:getReferToken()
            }
        }
    })
})

2. Definieren Sie die verwendeten Konstanten

config/constants.js

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

/*白名单，登录、刷新短token不受限制，也就不用token验证*/
const whiteList=['/login','/refresh']
const isWhiteList=(url,whiteList)=>{
        return whiteList.find(item => item === url) ? true : false
}

/*中间件
 验证短token是否有效
*/
const cuth = async (ctx,next)=>{
    let code, msg, data = null
    let url = ctx.path
    if(isWhiteList(url,whiteList)){
        // 执行下一步
        return await next()
    } else {
        // 获取请求头携带的短token
        const a_tk=ctx.request.headers['authorization']
        if(!a_tk){
            code=4003
            msg='accessToken无效，无权限'
            ctx.body={
                code,
                msg,
                data
            }
        } else{
            // 解析token
            await jwt.verify(a_tk,secret.(error)=>{
                if(error)=>{
                      code=4003
                      msg='accessToken无效，无权限'
                      ctx.body={
                          code,
                          msg,
                          datta
                      }
                } else {
                    // token有效
                    return await next()
                }
            })
        }
    }
}
module.exports=auth

3. Speichern und rufen Sie abgelaufene Anforderungen auf

Wichtiger Punkt: Verwenden Sie Promise, um Anforderungen mit abgelaufenen Token in einem Array zu speichern Ausstehender Status, d. h. nicht „resolve()“ aufrufen. Wenn ein neues Token erhalten wird, fordern Sie es erneut an. utils/refresh.js

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

4. Kapseln Sie axios/server.js

npm init vite@latest client_side

5. Kapselung wiederverwenden

npm i axios

Projekt läuft

Führen Sie abschließend das Projekt aus und überprüfen Sie die Wirkung des im Backend festgelegten kurzen Tokens für 5 Sekunden und des langen Tokens für 10 Sekunden. Nachdem die Anmeldeanforderung das Token erreicht hat, können die Anforderungsdaten normal angefordert werden. Wenn die Anforderung nach fünf Sekunden erneut gestellt wird, wird das lange Token ungültig , wird die Refresh-Schnittstelle nur einmal aufgerufen. Nach Ablauf des langen Tokens müssen Sie sich erneut anmelden.

Das obige ist der detaillierte Inhalt vonWie Vue3+Vite zwei Token verwendet, um eine sinnlose Aktualisierung zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!