vue项目登录成功拿到令牌跳转失败401无登录信息的解决

发布时间:2023-03-25 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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.@R_360_995@s = {
    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);
    })

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本宝典。

脚本宝典总结

以上是脚本宝典为你收集整理的vue项目登录成功拿到令牌跳转失败401无登录信息的解决全部内容,希望文章能够帮你解决vue项目登录成功拿到令牌跳转失败401无登录信息的解决所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。