js實現(xiàn)無感刷新的實踐(附前后端實現(xiàn))
無感刷新的核心思路：
無感刷新機(jī)制的目的是在用戶不知情的情況下，自動更新其認(rèn)證令牌（通常是Access Token），以保證用戶的會話不會中斷。這通常涉及到兩種類型的令牌：
Access Token：它是用戶進(jìn)行認(rèn)證后得到的令牌，允許用戶訪問服務(wù)器的受保護(hù)資源。它有一個較短的有效期。
Refresh Token：它是在同一時間發(fā)放給用戶的另一個令牌，用于在Access Token過期時獲取一個新的Access Token。它的有效期比Access Token長。
當(dāng)Access Token即將過期或已經(jīng)過期時，客戶端會使用Refresh Token向認(rèn)證服務(wù)器請求一個新的Access Token。如果Refresh Token仍然有效，認(rèn)證服務(wù)器則發(fā)放一個新的Access Token給客戶端，并且可能會同時發(fā)放一個新的Refresh Token。這個過程對用戶來說是沒有感知的，因此被稱為“無感”刷新。
在項目中實施無感刷新：
后端實施步驟：
認(rèn)證端點設(shè)置：
- 設(shè)計一個認(rèn)證API端點，當(dāng)用戶初次登錄時，返回Access Token和Refresh Token。
- 設(shè)計一個Token刷新API端點，只接受Refresh Token并返回新的Access Token（可選地返回新的Refresh Token）。
Token管理：
- Access Token應(yīng)有一個短暫的生命周期，例如15分鐘。
- Refresh Token應(yīng)有一個長期的生命周期，例如7天或更長，且應(yīng)該存儲在一個安全的存儲中。
安全考慮：
- 對Refresh Token進(jìn)行旋轉(zhuǎn)（每次使用后就廢棄舊的Refresh Token并發(fā)放一個新的）。
- 通過HTTPS交換所有Token。
- 應(yīng)用適當(dāng)?shù)募用艽胧﹣肀Ｗo(hù)Token的安全。
前端實施步驟：
存儲Token：
- 在客戶端安全地存儲Access Token和Refresh Token（例如使用Web的localStorage或SecureStorage）。
攔截請求和響應(yīng)：
- 使用攔截器監(jiān)視所有出站請求和進(jìn)站響應(yīng)。
- 在請求頭中自動加入Access Token。
處理過期的Access Token：
- 當(dāng)接收到表示Token過期的HTTP狀態(tài)碼（例如401）時，暫停發(fā)出的請求。
- 使用Refresh Token請求新的Access Token。
處理新的Access Token：
- 更新存儲中的Access Token。
- 重新發(fā)送之前因Token過期而暫停的請求。
處理Refresh Token過期：
- 如果Refresh Token也過期或無效，引導(dǎo)用戶重新登錄。
無感刷新機(jī)制的大概思路就是這些，下面是具體的示例，分為簡化版和完整版，簡化版目的是更好的了解無感刷新的原理，而完整版就要考慮一些其他問題，比如說安全問題。
下面是實現(xiàn)無感刷新機(jī)制的具體示例（簡化版）
這個例子涵蓋前端（使用JavaScript）和后端（Node.js環(huán)境下使用Express框架）
后端（Node.js/Express）
const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();
const accessTokenSecret = 'YOUR_ACCESS_TOKEN_SECRET';
const refreshTokenSecret = 'YOUR_REFRESH_TOKEN_SECRET';
let refreshTokens = [];
app.post('/login', (req, res) => {
// 用戶登錄邏輯，驗證用戶憑證
const { username, password } = req.body;
// 這里應(yīng)該有邏輯來驗證用戶憑證
// 如果驗證成功：
const accessToken = jwt.sign({ username }, accessTokenSecret, { expiresIn: '15m' });
const refreshToken = jwt.sign({ username }, refreshTokenSecret);
refreshTokens.push(refreshToken);
res.json({
accessToken,
refreshToken
});
});
app.post('/refresh', (req, res) => {
// 用戶發(fā)送refresh token來獲取新的access token
const { refreshToken } = req.body;
if (!refreshToken || !refreshTokens.includes(refreshToken)) {
return res.sendStatus(403);
}
jwt.verify(refreshToken, refreshTokenSecret, (err, user) => {
if (err) {
return res.sendStatus(403);
}
const newAccessToken = jwt.sign({ username: user.username }, accessTokenSecret, { expiresIn: '15m' });
res.json({
accessToken: newAccessToken
});
});
});
app.listen(3000, () => {
console.log('Authentication service started on port 3000');
});
前端（JavaScript/AJAX）
假設(shè)使用了axios作為HTTP客戶端，可以設(shè)置攔截器來自動處理Token刷新。
axios.interceptors.response.use(response => {
return response;
}, error => {
const originalRequest = error.config;
if (error.response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
return axios.post('/refresh', {
refreshToken: localStorage.getItem('refreshToken')
}).then(res => {
if (res.status === 200) {
localStorage.setItem('accessToken', res.data.accessToken);
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('accessToken');
return axios(originalRequest);
}
});
}
return Promise.reject(error);
});
這段代碼中，我們在響應(yīng)攔截器中檢查任何錯誤的響應(yīng)。如果我們得到一個401響應(yīng)，并且這是第一次重試，我們就發(fā)送一個帶有refreshToken的請求到/refresh端點。如果刷新Token成功，我們就保存新的accessToken，更新請求頭，并重新發(fā)起失敗的請求。
完整示例
實現(xiàn)非簡化的登錄無感刷新機(jī)制通常會涉及更詳細(xì)的認(rèn)證流程、錯誤處理、日志記錄和安全性措施。這包括使用數(shù)據(jù)庫存儲Refresh Tokens、自動撤銷機(jī)制、雙因素認(rèn)證等。
后端實現(xiàn)（Node.js/Express + MongoDB）
首先，你需要設(shè)置一個數(shù)據(jù)庫來存儲Refresh Tokens。出于安全考慮，每個Refresh Token都應(yīng)該與一個用戶賬戶關(guān)聯(lián)，并且能夠被追蹤和撤銷。
const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcrypt');
const User = require('./models/User'); // 導(dǎo)入User模型
const RefreshToken = require('./models/RefreshToken'); // 導(dǎo)入RefreshToken模型
const app = express();
// ...其他必要的中間件和數(shù)據(jù)庫連接代碼...
app.post('/login', async (req, res) => {
// 用戶登錄邏輯，驗證用戶憑證
const { username, password } = req.body;
const user = await User.findOne({ username });
if (user && bcrypt.compareSync(password, user.password)) {
const accessToken = jwt.sign({ userId: user._id }, accessTokenSecret, { expiresIn: '15m' });
const refreshToken = jwt.sign({ userId: user._id }, refreshTokenSecret);
// 保存refresh token到數(shù)據(jù)庫
const newRefreshToken = new RefreshToken({ token: refreshToken, user: user._id });
await newRefreshToken.save();
res.json({ accessToken, refreshToken });
} else {
res.status(401).send('Username or password incorrect');
}
});
app.post('/refresh', async (req, res) => {
// 用戶發(fā)送refresh token來獲取新的access token
const { refreshToken } = req.body;
const dbToken = await RefreshToken.findOne({ token: refreshToken });
if (!dbToken) {
return res.status(403).send('Refresh token not found');
}
jwt.verify(refreshToken, refreshTokenSecret, async (err, decoded) => {
if (err) {
return res.status(403).send('Refresh token invalid');
}
// 生成新的access token和refresh token
const newAccessToken = jwt.sign({ userId: decoded.userId }, accessTokenSecret, { expiresIn: '15m' });
const newRefreshToken = jwt.sign({ userId: decoded.userId }, refreshTokenSecret);
// 更新數(shù)據(jù)庫中的refresh token
dbToken.token = newRefreshToken;
await dbToken.save();
res.json({ accessToken: newAccessToken, refreshToken: newRefreshToken });
});
});
app.listen(3000, () => {
console.log('Authentication service started on port 3000');
});
在此示例中，我們使用了MongoDB來存儲用戶和他們的Refresh Tokens。登錄時，我們驗證用戶憑證，并且如果認(rèn)證成功，我們就生成Access Token和Refresh Token，然后將Refresh Token保存到數(shù)據(jù)庫。在無感刷新流程中，我們驗證提供的Refresh Token是否存在于數(shù)據(jù)庫中，并且是否有效，然后發(fā)放新的Access Token。
前端實現(xiàn)（JavaScript/AJAX + Local Storage）
在前端實現(xiàn)中，我們需要確保存儲Token的方法是安全的。在生產(chǎn)環(huán)境中，你可能需要考慮使用更安全的存儲方式，如HTTPOnly Cookies或Secure Local Storage。
axios.interceptors.response.use(
response => response,
error => {
const originalRequest = error.config;
// 檢測token過期的錯誤代碼，比如401
if (error.response.status === 401 && originalRequest.url === '/refresh') {
// 刷新Token失敗，直接登出用戶
logoutUser();
return Promise.reject(error);
}
if (error.response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
return axios.post('/refresh', { refreshToken: localStorage.getItem('refreshToken') })
.then(res => {
if (res.status === 200) {
// 將新token設(shè)置到本地存儲和axios默認(rèn)頭部
localStorage.setItem('accessToken', res.data.accessToken);
localStorage.setItem('refreshToken', res.data.refreshToken);
axios.defaults.headers.common['Authorization'] = 'Bearer ' + res.data.accessToken;
// 更新失敗請求的頭部并重新發(fā)送
originalRequest.headers['Authorization'] = 'Bearer ' + res.data.accessToken;
return axios(originalRequest);
}
})
.catch(error => {
// 任何錯誤都直接登出用戶
logoutUser();
return Promise.reject(error);
});
}
return Promise.reject(error);
}
);
function logoutUser() {
// 清除本地存儲和狀態(tài)，重定向到登錄頁面
localStorage.removeItem('accessToken');
localStorage.removeItem('refreshToken');
// ...重定向到登錄頁的代碼...
}
在前端的實現(xiàn)中，我們創(chuàng)建了一個axios攔截器，它會在遇到401未授權(quán)的響應(yīng)時自動嘗試刷新Token。如果刷新Token請求也失敗，則觸發(fā)用戶登出的邏輯。
注意：此功能一定要注意其安全性，具體的話要結(jié)合實際的項目，以下是我的一些建議：
安全方面通常包括以下幾個方法：
1. 使用HTTPS來加密所有的通信。
2. 安全地存儲Access Token和Refresh Token，如使用httpOnly和Secure屬性的Cookies。
3. 對Token進(jìn)行定期輪換，特別是Refresh Token。
4. 在服務(wù)器端驗證Token的簽名。
5. 設(shè)置適當(dāng)?shù)腡oken過期時間。
6. 實現(xiàn)Token撤銷邏輯，以便在檢測到異常時能夠立即廢棄使用。
7. 避免在客戶端暴露敏感的認(rèn)證邏輯。
8. 對所有的認(rèn)證請求和Token刷新請求進(jìn)行率限制和異常監(jiān)測。
9. 使用跨站請求偽造（CSRF）保護(hù)措施。
10. 確?？蛻舳撕头?wù)端都有充分的錯誤處理和日志記錄機(jī)制。
到此這篇關(guān)于js實現(xiàn)無感刷新的實踐(附前后端實現(xiàn))的文章就介紹到這了,更多相關(guān)js 無感刷新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡單的計算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了ES6新特性之變量和字符串用法,結(jié)合具體實例形式分析了ES6中變量與字符串的特性、使用方法與相關(guān)注意事項,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了JS簡單隨機(jī)數(shù)生成方法,通過javascript自定義函數(shù)演示了隨機(jī)數(shù)的生成方法,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了原生JS檢測CSS3動畫是否結(jié)束的方法,結(jié)合實例形式分析了javascript事件響應(yīng)及針對css3屬性檢測相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
JS前端開發(fā)模擬虛擬dom轉(zhuǎn)真實dom詳解
這篇文章主要為大家介紹了JS前端開發(fā)模擬虛擬dom轉(zhuǎn)真實dom詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
使用FormData上傳文件時，總是獲取不到req.file對象。發(fā)現(xiàn)是沒有配置對FormData導(dǎo)致的，怎么解決這個問題呢？下面小編給大家?guī)砹薐S FormData上傳文件的設(shè)置方法，需要的朋友參考下吧2017-07-07
這篇文章主要介紹了JS實現(xiàn)的簡單拖拽功能,涉及javascript鼠標(biāo)事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2017-03-03
下面小編就為大家?guī)硪黄猨s數(shù)字計算 誤差問題的快速解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
js實現(xiàn)的點擊超鏈顯示隱藏層...2007-05-05
使用pcs api往免費的百度網(wǎng)盤上傳下載文件的方法
百度個人云盤空間大，完全免費，而且提供了pcs api供調(diào)用操作文件，在平時的項目里往里面保存一些文件是很實用的。通過本文給大家介紹使用pcs api往免費的百度網(wǎng)盤上傳下載文件的方法，感興趣的朋友一起學(xué)習(xí)吧2016-03-03