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

目录 vue项目登录成功拿到令牌跳转失败401无登录信息 问题原因 vue项目登录处理token令牌问题 总结

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

之前的一个上线 半 年多的项目，客户提出 一点 小需求改动，当跑项目时发现线上没有问题，线下登录成功，自动跳转后验证登录人信息时验证失败，无登录信息导致页面一直停留在登录页

登录请求成功

随后跳转页面后调取当前登录人信息无效，跳回登录页重新登录

导致页面一直停留在登录页。

问题 原因

线下测试环境地址可能存在跨域问题，但是不会报跨域错误，部分接口可以访问，但访问后的接口数据得不到认可。

common.js原地址写法

root() {
        return o.isDev() ? "https://HdhCmsTestb ai du .COM /api/admin/" :
         "https://HdhCmsTestbaidu测试数据/api/admin/";
    },

改为

root() {
        return "/api/admin/";
    },

同时vue. config .js加代码如下

const devServerBaseUrl = "https://HdhCmsTestbaidu测试数据"
module. export s = {
    devServer: {
    // 在devServer里加下面代码
         Proxy : {
            '/api/*': {
                t arg et: devServerBaseUrl,
                pat hr ewr IT e: {
                    '^/api': '/api'
                }
            },
        }
   //  加以上代码，其他需要的配置这里删除了，其他配置需要的自行添加
    },
}

这样就可以避免接口地址正确，但是存在跨域不报错的问题，如上操作是 公司 大佬传授的

vue项目登录处理token令牌问题

1、在点击登录按钮后，后台会返回一个token

2、将得到的token先储存在sessionStorage中，window.sessionStorage.setItem(& # 39;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项目在线上服务器访问失败原因分析 解决vue项目路径不正确,自动跳转404的问题 解决vue+router路由跳转不起作用的一项原因

总结

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

如果觉得 网站内容还不错， 推荐好友。

查看更多关于vue项目登录成功拿到令牌跳转失败401无登录信息的解决的详细内容...