vue项目登录成功拿到令牌跳转失败401无登录信息的解决
更新时间：2023年02月23日 16:50:15 作者：kis_me
这篇文章主要介绍了vue项目登录成功拿到令牌跳转失败401无登录信息的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue项目登录成功拿到令牌跳转失败401无登录信息
之前的一个上线半年多的项目，客户提出一点小需求改动，当跑项目时发现线上没有问题，线下登录成功，自动跳转后验证登录人信息时验证失败，无登录信息导致页面一直停留在登录页
登录请求成功
随后跳转页面后调取当前登录人信息无效，跳回登录页重新登录
导致页面一直停留在登录页。
问题原因
线下测试环境地址可能存在跨域问题，但是不会报跨域错误，部分接口可以访问，但访问后的接口数据得不到认可。
common.js原地址写法
root() {
return o.isDev() ? "https://www.baidu.com/api/admin/" :
"https://www.baidu.com/api/admin/";
},
改为
root() {
return "/api/admin/";
},
同时vue.config.js加代码如下
const devServerBaseUrl = "https://www.baidu.com"
module.exports = {
devServer: {
// 在devServer里加下面代码
proxy: {
'/api/*': {
target: devServerBaseUrl,
pathRewrite: {
'^/api': '/api'
}
},
}
// 加以上代码，其他需要的配置这里删除了，其他配置需要的自行添加
},
}
这样就可以避免接口地址正确，但是存在跨域不报错的问题，如上操作是公司大佬传授的
vue项目登录处理token令牌问题
1、在点击登录按钮后，后台会返回一个token
2、将得到的token先储存在sessionStorage中，window.sessionStorage.setItem('token',token)
3、然后就可以在请求拦截器中获取到存储的token
//axios请求拦截器
instance.interceptors.request.use(config => {
//在此处携带token,将token放在请求头中，传给后台
if(window.sessionStorage.getItem('token')) {
config.headers['Authorization'] = window.sessionStorage.getItem(token)
}
return config;
}, err => {
console.log(err);
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于前端JS连点成线(Vue中运用 AntVG6)的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue3+ts使用Echarts的实例详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
由于涉及到vue框架单网页应用首屏加载慢这个问题,我们需尽量减少加载负担,故采用按需引入的方式,只引入项目中用到的组件,这篇文章主要给大家介绍了关于Vue3按需引入Element Plus以及定制主题色的相关资料,需要的朋友可以参考下2023-06-06
Vue3使用Vuex之mapState与mapGetters详解
这篇文章主要为大家介绍了Vue3使用Vuex之mapState与mapGetters详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
Element Plus组件Form表单Table表格二次封装的完整过程
一般在后台管理系统的开发中,都会遇到很多table,但每一次都去引入el-table就会导致代码十分冗余,所以基于组件做一下二次封装成自己需要的组件就十分nice,下面这篇文章主要给大家介绍了关于Element Plus组件Form表单Table表格二次封装的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要为大家详细介绍了vue实现拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
这篇文章主要介绍了vue 子组件和父组件传值的示例，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下2020-09-09
今天小编就为大家分享一篇vue keep-alive 动态删除组件缓存的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家介绍了vue开发中后台系统复杂表单的优化技巧，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了VeeValidate在vue项目里表单校验应用案例，VeeValidate是Vue.js的验证库，它有很多验证规则，并支持自定义规则，非常具有实用价值，需要的朋友可以参考下2018-05-05
最新评论