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
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
npm install koa-generator -g
koa2 server
npm i jsonwebtoken
npm i koa-cors
const cors=require('koa-cors') ... app.use(cors())
IV. Frontend-Code
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
}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=auth3. 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
npm i axios
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
