JWT 鉴权
> 使用 koa-jwt
+ jsonwebtoken
完成用户鉴权功能。
> 项目地址:github.com/Ewall1106/mall
安装
- 首先我们安装 [koa-jwt]和 [jsonwebtoken](这两个
npm
包。
$ npm install koa-jwt jsonwebtoken --save
- 先明确一下两者的关系:
koa-jwt
是负责对token
进行验证的,而jsonwebtoken
是负责生成token
的。
JWT 鉴权
- 在
app.js
中引入并使用。
const Koa = require('koa');
const jwt = require('koa-jwt');
const app = new Koa();
// 1. 错误信息处理
app.use(async (ctx, next) => {
return next().catch((err) => {
if (401 == err.status) {
ctx.body = {
code: 50001,
message: '用户鉴权失败',
};
} else {
throw err;
}
});
});
// 2. 中间件注册
app.use(jwt({ secret: JWT_SECRET }).unless({ path: [/^\/public/, /\/login/] }));
-
第
1
处是定义了当鉴权失败的时候,koa
服务返回的一些内容。 -
第
2
处就是koa-jwt
这个中间件的注册。- 其中
JWT_SECRET
是一个加密因子,可以提升安全性,你也可以设置成123456
,但是为了更安全点推荐用密钥生成器生成一段密钥。 - 后面的
path
路径是设置匹配不需要鉴权的路由或目录,比如我这里设置了所有的public
开头的、登录xxxx/login
的请求都不需要鉴权。
- 其中
Token 生成
- 还是前面说到的,
koa-jwt
是负责对token
进行验证的,而jsonwebtoken
是负责生成token
的,所以接下来看我们如何进行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
这个库,其实token
的生产很简单。{ uid: user._id }
就是一个payload
数据载体,就是你可以放些参数在token
中,比如用户的id
。JWT_SECRET
就是前面提到的加密因子,要跟koa-jwt
设置的保持一致。expiresIn
设置token
的过期时间。
-
至此,服务端的鉴权主要功能就完成了。
前端设置
- 在前端,首先我们需要登录的时候获取这个
token
,然后把它放到vuex
中或者本地缓存起来。
// 登录
login(loginInfo).then((res) => {
const { token } = res.entry;
console.log('token', token);
});
- 在
axios
请求拦截器中设置Authorization
鉴权头,每次请求的时候都带上token
值。
// src/utils/request.js
// 请求拦截器
service.interceptors.request.use(
(config) => {
if (store.getters.token) {
// JWT鉴权
config.headers.Authorization = `Bearer ${getToken()}`;
}
return config;
},
(error) => {
console.log(error);
return Promise.reject(error);
}
);
-
然后服务端的
koa-jwt
就会通过读Authorization
这个header
头中的token
值来进行比对校检鉴权了。 -
至此,我们使用
koa-jwt
+jsonwebtoken
完成了用户鉴权功能,具体代码实现请移步[项目仓库中。