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

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

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);
    })

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue+router路由跳转不起作用的一项原因

    如下所示: Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', component: Login }, { path: '/login', component: Login }, { path: '/register',component: Register}, {path: '/*', component: NotFound}, ] }) 记得要写上 mode:'history',

  • 解决vue项目路径不正确,自动跳转404的问题

    目录 vue项目路径不正确,自动跳转404 第一种方法 第二种 vue路由判断跳转404页面 vue项目路径不正确,自动跳转404 第一种方法 使用vuerouter钩子函数beforeEach,每次进行路由跳转时都进行判断,若页面不存在就跳转到404页面. import Error from ' '   const router = new Router({     routes:[         name: 'error',         path: '/error',        

  • vue项目在线上服务器访问失败原因分析

    珊妹儿遇到一个奇葩问题哈,跟大家伙来分享分享,首先因为刚接手的项目,我还没有线上服务器的连接信息,前端代码都是我打包好给别人,别人传到服务器的,传到线上服务器访问不了,这就是中间出现了问题. 所谓,打包就是压缩的概念,而压缩文件再次压缩就会导致文件成倍的增大,这中间就出现了很多问题,我们排除了很多问题都没找见原因,后来我就寻思拿U盘拷一份再试试,结果成功了!!!!! 据珊妹儿多年经验来分析,用U盘直接拷贝的是源文件,而压缩完传过去的压缩包再解压缩,就不是原来的文件了!嗯 应该是这个原因.....

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

    目录 vue项目登录成功拿到令牌跳转失败401无登录信息 问题原因 vue项目登录处理token令牌问题 总结 vue项目登录成功拿到令牌跳转失败401无登录信息 之前的一个上线半年多的项目,客户提出一点小需求改动,当跑项目时发现线上没有问题,线下登录成功,自动跳转后验证登录人信息时验证失败,无登录信息导致页面一直停留在登录页 登录请求成功 随后跳转页面后调取当前登录人信息无效,跳回登录页重新登录 导致页面一直停留在登录页. 问题原因 线下测试环境地址可能存在跨域问题,但是不会报跨域错误,部分接

  • Vue 项目的成功发布和部署的实现

    Vue 项目的成功发布和部署的实现

    最近一直在尝试对 Vue 项目进行打包和发布,发现通过 npm run build 打包生成的 dist 文件不能直接放到服务器下面进行部署,否则会出现以下问题: 究其原因是,无法正确找到相关 js 文件的路径 .网上查找了很多的解决方案,大多建议修改路由模式(mode:' history ')和发布的文件路径(publicPath:' ./ '),但由于脚手架版本的原因,一直找不到相应的配置文件,这里使用的是最新版本的 VueCLI 5 创建的项目,官方简化了许多文件的配置信息(隐藏起来了).

  • spring security登录成功后跳转回登录前的页面

    spring security登录成功后跳转回登录前的页面

    目录 spring security登录成功后跳转回登录前的页面 需求如下 代码如下 Springsecurity 配置文件和登录跳转 项目结构 直接上springsecurity配置文件 自定义的登录页面login.html上需要加form标签登录框 具体修改如下 spring security登录成功后跳转回登录前的页面 我刚好碰到了这么一个需求,正好自己也刚开始学spring security,但是我百度了一下,发现都讲的好麻烦,其实大概了解完之后,亲自实践一下发现,操作非常简单. 需求如

  • JavaFx实现登录成功跳转到程序主页面

    JavaFx实现登录成功跳转到程序主页面

    本文实例为大家分享了JavaFx实现登录成功跳转到程序主页面的具体代码,供大家参考,具体内容如下 1.需求 登录页面在输入账号密码之后,验证账号密码时候正确,正确就跳转到应用程序的首页.文笔不行,可能没怎么写清楚,欢迎在下面讨论 效果如下图: 2.实现 1).LoginApplication为启动类,启动之后进入到登录页面 public class LoginApplication extends Application {     @Override     public void start

  • bing Map 在vue项目中的使用详解

    写在最前面 拥有全球数据库国内好像就只有百度地图有,高德.搜狗.腾讯的都不行,但是由于百度地图的数据更新不及时,所以在做相关项目要用到国外数据的时候,最好还是推荐使用bingMap. bing Map 使用教程(基础) 参考文档:bing Map 官方教程 bing Map 初始化 引入bing map资源 <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&k

  • 浅谈Visual Studio 2019 Vue项目的目录结构

    Visual Studio 2019 Vue项目 创建成功后可看到如下结构 Visual Studio 2019配置vue项目 具体文件结构如下图 模版使用 入口文件: public/index.html   和 src/main.js 总结 到此这篇关于Visual Studio 2019 Vue项目 目录结构的文章就介绍到这了,更多相关visual studio 2019 vue项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • vue项目中微信登录的实现操作

    1.下载组件 wxlogin npm install vue-wxlogin --save 2.引入组件,给组件传参 3.重定向的url应该是微信登录官网中的微信授权作用域 4.如果url里面有端口号,微信授权作用里面也要有 5.重定向的url:需要在http://tool.chinaz.com/tools/urlencode.aspx中转码 6.微信登录成功后,会自动重定向到新地址,此时的地址栏中就有code参数 7.如果报错说不能从组件跳到页面,那就找到wxlogin组件里面的iframe标

  • Vue项目中token验证登录(前端部分)

    本文实例为大家分享了Vue项目中token验证登录的具体代码,供大家参考,具体内容如下 1.前言 最近在做毕业设计,我是做后端的,前端并不是很懂,看vue这个框架看了近两个礼拜才有点入门的感觉,所以这篇文章写的可能不怎么好,仅作记录,有什么不对或不足的地方欢迎大神指出. 2.问题 做一个登录界面,我选择的是用token进行验证登录,我用的前端框架是Vue.js 和 element-ui,如何在vue 中使用token进行验证登录 3.思考 1.利用token进行验证登录,用户进行登录操作时,后台

  • Vue项目如何保持用户登录状态(localStorage+vuex刷新页面后状态依然保持)

    Vue项目如何保持用户登录状态(localStorage+vuex刷新页面后状态依然保持)

    目录 前言 一.实现效果 二.实现步骤及涉及要点 三.涉及代码 总结 前言 在前端项目开发中,实现用户的登陆注册功能时常常会有一个问题,那就是我们设置的登录状态,在浏览器页面刷新后就消失了,这其实只是因为我们没有保存用户状态. 这里小马演示使用的是 localStorage + vuex 方法(其他诸如 sessionStorage.cookie 等用法相同,只是功能有所区别). 一.实现效果 实现功能:用户登录成功后,刷新浏览器页面或者关闭浏览器再次打开网页后,登录状态依然保持,直到用户点击登

  • 使用Shiro实现登录成功后跳转到之前的页面

    使用Shiro实现登录成功后跳转到之前的页面

    这个问题是之前在做登录注册模块时遇到的需求,如何用户直接访问登录页面,可以控制直接跳到首页,但是如果是用户没有登录直接访问了购物车等需要经过身份认证的页面,或者是因为session超时,用户需要重新登录,那么这时跳回之前的页面就是提升用户体验的事情.实现此功能比较好的方法是用ajax的方式登陆,这样直接在当前页面弹窗让用户登录既可,二是把用户未登录前的url存在session中,login成功之后先检查session中是否存在这样的一个url.下面通过一段代码给大家分享下: 项目中集成了shir

随机推荐