1、首先安装jsonwebtoken
(c)npm install jsonwebtoken -S
2、根据前端发送的登录信息,生成对应token
import { Router,Request,Response } from "express";
import jwt from 'jsonwebtoken';
export default (router:Router) => {
router.post('/',(req:Request,res:Response) => {
/*
req.body 加密的token信息这里是{user:admin,pass:admin}
'Agwenbi' 加密的密钥,自己约定
expiresIn 过期时间,单位秒
*/
const token = jwt.sign({
...req.body
},'Agwenbi',{
expiresIn: (60 * 60 * 24) * 7//7天有效期
});
res.status(200).json({//token信息发送给前端
code:0,
msg:'请求成功',
token
});
});
return router;
}
//前端接收到token并保存token信息
localStorage.setItem('xmds-token',loginResult.token);
3、前端请求头默认加上token信息
import axios,{AxiosInstance, AxiosRequestConfig, AxiosResponse} from 'axios';
import qs from 'qs';
class CreateAxios {
public http:AxiosInstance
constructor(){
this.http = axios.create({
timeout:10 * 1000,
baseURL:'http://localhost:8090'
});
}
}
class AxiosReq extends CreateAxios {//请求拦截器
constructor(){
super();
this.axiosReq();
}
axiosReq(){
this.http.interceptors.request.use((config:AxiosRequestConfig) => {
const token = localStorage.getItem('xmds-token');
if(token){//存在token,默认加上token
config.headers.common['Authorization'] = token;
}
if(config.method === 'post'){
config.data = qs.stringify(config.data);
}
return config;
},error => {
console.log(error);
})
}
}
class AxiosRes extends AxiosReq {//响应拦截器
constructor(){
super();
this.axiosRes();
}
axiosRes(){
this.http.interceptors.response.use((response:AxiosResponse<any>) => {
const result = Promise.resolve(response.data);
return result;
},error => {
console.log(error);
})
}
}
const http:AxiosInstance = new AxiosRes().http;
export default http;
4、node全局路由,验证token
import jwt from 'jsonwebtoken';
const noTokenUrl = ['/login'];//不需要验证token的请求
app.use((req:Request,res:Response,next:NextFunction) => {
const token = req.headers.authorization;
if(token){//存在token
jwt.verify(token,'Agwenbi',(error,decoded) => {//Agwenbi表示密钥,参考第二步设置的密钥
const tokenFlag = error?.name;
if(tokenFlag === 'TokenExpiredError'){//token过期
res.status(200).json({
code:401,
msg:'token过期'
});
}else if(tokenFlag === 'JsonWebTokenError'){//token验证失败
res.status(200).json({
code:401,
msg:'无效token'
});
}else{//token未过期,且验证通过
next();
}
});
}else{//不存在token
if(noTokenUrl.includes(req.url)){//是否在不需要token验证的路由下
next();
}else{//不在接受的路由当中,且未携带token
res.status(200).json({
code:401,
msg:'无效token'
});
}
}
});