后端访问sso后,如何返回前端vue页面(后端redirect跳转,vue代理,axios带参)
由于项目要加上公司的sso,出现的一系列问题,找到解决办法,在此记录一下。可能并不适合其他项目,给个参考。
前提:
前端是vue.js,后端springboot
sso配置需要增加公司自己的maven依赖和yml配置。
启动项目后,首先访问后端/index接口,进入sso拦截,访问sso页面;登陆成功后返回goto指向的url(也就是index接口的return内容),附上/index接口代码:
@GetMapping(value={"/dist","dist/index"})
public String index(HttpServletRequest request) {
User user = UserUtils.getCurrentUser(request);
request.getSession().setAttribute("user", user);
return "redirect:http://192.168.0.XXX:8081"; //开发环境
// return "redirect:/loginShow"; //正式环境
}
@RequestMapping("/loginShow")
public ModelAndView loginShow(HttpServletRequest request) {
ModelAndView modelAndView = new ModelAndView("redirect:/dist/index.html");
return modelAndView;
}
(其中loginShow方法是用来解决url显示token参数问题的,加上之后sso跳转url的参数隐藏)。
这时,前端访问接口报错,跨域问题。
如果是vue2.0,可以在axios的封装类之中加上一句话:
axios.defaults.withCredentials = true;
加在axios.create(...)之前,这句话的作用是访问接口时带着参数,比如token、session。
如果是vue3.0,还需要在vue.config.js中的module.exports里面增加proxy代理,如果没有vue.config.js,可以创建一个。代理代码如下:
devServer: {
proxy: {
'/api': {
target: 'http://192.168.0.XXX:8080/XXXXXX',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
然后,请求基础路径需要都改成和上面的路径一致,比如这里写的'/api',那么项目中baseUrl的dev或pro路径也要写成'/api'(可以自定义,不用非叫'api',只要一致就好)。
后端访问sso后,如何返回前端vue页面(后端redirect跳转,vue代理,axios带参)的更多相关文章
- 微信扫码登陆,qq登陆,微博登陆等第三方登陆成功后返回原来的页面并进行跳转
原理很简单,主要是利用到window.open的第二个属性,name 前端: 原来的网页给window命名为 window.name="single" window.open(“第 ...
- 解决session失效之后登陆后重新返回之前的页面
在全局拦截器设置保存之前的url存入session中 登陆之后的地址再重session中存 request只用作一次请求 如果页面跳转几次的话原来的url就不存在了建议存在session @Overr ...
- SpringBoot 和Vue前后端分离入门教程(附源码)
作者:梁小生0101 juejin.im/post/5c622fb5e51d457f9f2c2381 推荐阅读(点击即可跳转阅读) 1. SpringBoot内容聚合 2. 面试题内容聚合 3. 设计 ...
- spring boot + vue + element-ui全栈开发入门——前端列表页面开发
一.页面 1.布局 假设,我们要开发一个会员列表的页面. 首先,添加vue页面文件“src\pages\Member.vue” 参照文档http://element.eleme.io/#/zh-CN ...
- 【原】移动端vue页面点透事件 - 分析与解决
近期项目遇到了vue页面事件被带到下一个页面的问题,也就是我们常说的点透事件,主要表现在android机器上,花了不少时间折腾,简单做下总结~ vue页面之间的切换通过Vue Router的route ...
- URL不变的情况下,最实用的vue刷新当前页面,provide / inject 组合 方式实现vue页面刷新
原文:https://blog.csdn.net/Dream_xun/article/details/83024487 其他参考:https://blog.csdn.net/liyunkun888/a ...
- Spring Boot + Vue 前后端分离开发,前端网络请求封装与配置
前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个 ...
- Django:前后端分离后联调给前端传数据
实现前后端分离后,有了下面几点改变: 1.服务器一分为二,前后端分别部署,静态资源放在前端服务器,业务代码放在后的服务器 2.前端服务器需要接收Http请求(一般使用node.js) 3.前端服务器需 ...
- 后端统一处理返回前端日期LocalDateTime格式化去T,Long返回前端损失精度问题
一.前言 我们在实际开发中肯定会遇到后端的时间传到前端是这个样子的:2022-08-02T15:43:50 这个时候前后端就开始踢皮球了,!! 后端说:前端来做就可! 前端说:后端来做就可! 作为一名 ...
随机推荐
- 【C#】WPF的xaml中定义的Trigger为什么有时候会不管用,如Border的MouseOver之类的
原文:[C#]WPF的xaml中定义的Trigger为什么有时候会不管用,如Border的MouseOver之类的 初学WPF,知道一些控件可以通过定义Style的Trigger改变要显示的样式,但是 ...
- WPF控件TextBlock中文字自动换行
原文:WPF控件TextBlock中文字自动换行 在很多的WPF项目中,往往为了追求界面的美观,需要控制控件中文字的换行显示,现对TextBlock控件换行的实现方式进行总结,希望大家多多拍砖!!! ...
- WPF属性(一)依赖属性
原文:WPF属性(一)依赖属性 依赖属性是一种可以自己没有值,并能通过使用Binding从数据源获得值的属性,拥有依赖属性的对象称为依赖对象,在传统开发中,一个对象所占用的内存在调用new操作符进行实 ...
- js如何通过变量调用函数,函数名在变量里面
js如何通过变量调用函数,函数名在变量里面. 有时候函数名是动态定义的,这时候我们就需要用到这个方法了. //赋值函数名称 var a = "b"; //定义函数 function ...
- 微信小程序把玩(十六)form组件
原文:微信小程序把玩(十六)form组件 form表单组件 是提交form内的所有选中属性的值,注意每个form表单内的组件都必须有name属性指定否则提交不上去,button中的type两个subm ...
- WPF生成二维码
WPF可以通过ZXing.Net库来实现二维码的功能. 可以通过NuGet安装: Install-Package ZXing.Net 二维码的实现代码: #region 二维码的方法 /// < ...
- 微信小程序实战之百思不得姐精简版
原文:微信小程序实战之百思不得姐精简版 微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块.这篇就带着大家简述下这个小的A ...
- Android CTS Test failed to run to conmpletion 测试超时问题
引用“Android cts all pass 全攻略”里面的一段话: ❀ testcase timeout 测试某个testcase的时候一直出现 “........”,迟迟没有pass或者fail ...
- qt sql事务操作
事务是数据库的一个重要功能,所谓事务是用户定义的一个数据库操作序列,这些操作要么全做要么全不做,是一个不可分割的工作单位.在Qt中用transaction()开始一个事务操作,用commit()函数或 ...
- Understand the Qt containers(有对应表)
Container classes are one of the cornerstones of object-oriented programming, invaluable tools that ...