注意到作者在Login.vue中跳转首页处有提到这一句:
// 需要刷新页面,否则 axios.js 文件里的 token 不会被重置
window.location.href = '/'
而我在研究实现用户登录后跳转回登录前尝试访问但被拦截的页面功能时遇到类似的问题,即用户在登录页登录后,本地storage确实存了token值,但是目标页的请求却因为请求头中的token是空返回结果416“未登录”,进而再次被拦截回登录页。
这个问题我的理解是axios.js中
axios.defaults.headers['token'] = localStorage.getItem('token') || ''
这行配置只是在项目一开始取了本地storage中的token配给请求头,而后续token更新后便不会再次生效。因此目前我考虑的解决方案是在axios中添加请求拦截器,每次请求都取token放入请求头:
//这里我和作者一样没有创建axios实例,有具体需求可通过axios.create({})自行创建和配置实例。
axios.interceptors.request.use(config => { config.headers['token'] = localStorage.getItem('token') || '' return config })
注意到作者在Login.vue中跳转首页处有提到这一句:
// 需要刷新页面,否则 axios.js 文件里的 token 不会被重置window.location.href = '/'而我在研究实现用户登录后跳转回登录前尝试访问但被拦截的页面功能时遇到类似的问题,即用户在登录页登录后,本地storage确实存了token值,但是目标页的请求却因为请求头中的token是空返回结果416“未登录”,进而再次被拦截回登录页。
这个问题我的理解是axios.js中
axios.defaults.headers['token'] = localStorage.getItem('token') || ''这行配置只是在项目一开始取了本地storage中的token配给请求头,而后续token更新后便不会再次生效。因此目前我考虑的解决方案是在axios中添加请求拦截器,每次请求都取token放入请求头:
//这里我和作者一样没有创建axios实例,有具体需求可通过axios.create({})自行创建和配置实例。axios.interceptors.request.use(config => { config.headers['token'] = localStorage.getItem('token') || '' return config })