使用
koa-jwt+jsonwebtoken完成用戶鑒權(quán)功能泼掠。
項(xiàng)目地址：https://github.com/Ewall1106/mall
安裝
- 首先我們安裝 koa-jwt 和 jsonwebtoken這兩個(gè)
npm包怔软。
$ npm install koa-jwt jsonwebtoken --save
- 先明確一下兩者的關(guān)系：
koa-jwt是負(fù)責(zé)對(duì)token進(jìn)行驗(yàn)證的，而jsonwebtoken是負(fù)責(zé)生成token的择镇。
JWT 鑒權(quán)
- 在
app.js中引入并使用挡逼。
const Koa = require('koa');
const jwt = require('koa-jwt');
const app = new Koa();
// 1. 錯(cuò)誤信息處理
app.use(async (ctx, next) => {
return next().catch((err) => {
if (401 == err.status) {
ctx.body = {
code: 50001,
message: '用戶鑒權(quán)失敗',
};
} else {
throw err;
}
});
});
// 2. 中間件注冊(cè)
app.use(jwt({ secret: JWT_SECRET }).unless({ path: [/^\/public/, /\/login/] }));
第
1處是定義了當(dāng)鑒權(quán)失敗的時(shí)候，koa服務(wù)返回的一些內(nèi)容腻豌。-
第
2處就是koa-jwt這個(gè)中間件的注冊(cè)家坎。- 其中
JWT_SECRET是一個(gè)加密因子，可以提升安全性吝梅，你也可以設(shè)置成123456虱疏，但是為了更安全點(diǎn)推薦用密鑰生成器生成一段密鑰。 - 后面的
path路徑是設(shè)置匹配不需要鑒權(quán)的路由或目錄苏携，比如我這里設(shè)置了所有的public開頭的做瞪、登錄xxxx/login的請(qǐng)求都不需要鑒權(quán)。
- 其中
Token 生成
- 還是前面說(shuō)到的兜叨，
koa-jwt是負(fù)責(zé)對(duì)token進(jìn)行驗(yàn)證的穿扳，而jsonwebtoken是負(fù)責(zé)生成token的衩侥，所以接下來(lái)看我們?nèi)绾芜M(jìn)行token的生成国旷。
// controller/UserController.js
const jwt = require('jsonwebtoken');
async login(ctx, next) {
// ...
// 在登錄成功后
const token = jwt.sign({ uid: user._id }, JWT_SECRET, { expiresIn: '15d' });
ctx.body = {
code: 200,
entry: {
token: token
},
};
},
-
如上，利用
jsonwebtoken這個(gè)庫(kù)茫死，其實(shí)token的生產(chǎn)很簡(jiǎn)單跪但。-
{ uid: user._id }就是一個(gè)payload數(shù)據(jù)載體，就是你可以放些參數(shù)在token中峦萎，比如用戶的id屡久。 -
JWT_SECRET就是前面提到的加密因子，要跟koa-jwt設(shè)置的保持一致爱榔。 -
expiresIn設(shè)置token的過(guò)期時(shí)間被环。
-
至此，服務(wù)端的鑒權(quán)主要功能就完成了详幽。
前端設(shè)置
- 在前端筛欢，首先我們需要登錄的時(shí)候獲取這個(gè)
token浸锨，然后把它放到vuex中或者本地緩存起來(lái)。
// 登錄
login(loginInfo).then((res) => {
const { token } = res.entry;
console.log('token', token);
});
- 在
axios請(qǐng)求攔截器中設(shè)置Authorization鑒權(quán)頭版姑，每次請(qǐng)求的時(shí)候都帶上token值柱搜。
// src/utils/request.js
// 請(qǐng)求攔截器
service.interceptors.request.use(
(config) => {
if (store.getters.token) {
// JWT鑒權(quán)
config.headers.Authorization = `Bearer ${getToken()}`;
}
return config;
},
(error) => {
console.log(error);
return Promise.reject(error);
}
);
然后服務(wù)端的
koa-jwt就會(huì)通過(guò)讀Authorization這個(gè)header頭中的token值來(lái)進(jìn)行比對(duì)校檢鑒權(quán)了。至此剥险，我們使用
koa-jwt+jsonwebtoken完成了用戶鑒權(quán)功能聪蘸，具體代碼實(shí)現(xiàn)請(qǐng)移步項(xiàng)目倉(cāng)庫(kù)中。
