项目github地址:
项目概述:
后端: 基于NodeJs的express框架
前端: vue-cli3.0+ElementUI
数据库：mongoDB线上数据库mlab
问题描述:
系统前端登陆后每次发起请求的时候，一直报错token失效，并且报401的错误但是cosole没有其他错误，编译器中也没有任何报错
token一直失效
解决过程:
- 二话不说，先去后端登陆api中查看返回token的过期时间:
jwt.sign(rule,keys.secretOrKey,{expiresIn:3600},(err,token)=>{//jwt.sign(规则，密钥，过期时间，箭头函数)
if(err)
throw(err);
return res.json({
success:true,
token:"Bearer "+token
});
})
(jwt是NodeJs中的一个返回token的库jsonwebtoken的简写)
但是我发现token的过期时间我设置的是3600ms,也就是10分钟，不可能马上过期
- 这时候好像突然陷入逻辑死角，这时候就百度一波，不慌
百度中查到 : 401报错:Unauthorized,即未授权的
一般都是因为发送到后端的request中没有包含Authorization Header
- 撸起袖子，想想且看看
postman模拟请求数据一切正常，Authorization Header正常
但是通过前端请求失败
于是我又将屠刀指向了前端的请求拦截页面:
//请求拦截
axios.interceptors.request.use(config=>{
//加载动画
startLoading();
if(localStorage.eleToken){
//设置统一的请求header
config.headers.Authorzation=localStorage.eleToken;
}
return config;
},error => {
return Promise.reject(error)
});
(前端我是用axios进行数据请求)
看这些亲生的代码，风平浪静，好像每个代码都很无辜的样子
但是凭着男人尖锐的直觉，我觉得就是这个问题
于是我逐字逐句看……MMP
axios.interceptors.request.use(config=>{
//加载动画
startLoading();
if(localStorage.eleToken){
//设置统一的请求header
config.headers.Authorization=localStorage.eleToken;
}
return config;
},error => {
return Promise.reject(error)
});
看出什么区别了么？没错，就是Authorization落了一个字母i……
webstorm也没有报错，就这么一直藏在这里
结果让我抑郁了一个下午……
总结
token失效，报401的错误，第一先看看后端的token失效时间，然后用postman模拟请求一下，然后还解决不了再百……咳咳，然后再看看前端请求拦截代码是不是错了,本次问题我就是前端的锅……
咳咳……见笑见笑了
