zoukankan      html  css  js  c++  java
  • 后端访问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',只要一致就好)。

  • 相关阅读:
    Django 之 admin管理工具
    第二十七天- 网络通信协议 TCP UDP 缓冲区
    第二十六天- C/S架构 通信流程 socket
    第二十五天- 包
    第二十四天- 模块导入 import from xxx import xxx
    第二十三天- 模块 re
    第二十二天- 序列化 pickle json shelve
    第二十一天- 基本模块
    第二十天- 多继承 经典MRO 新式MRO super()
    第十九天- 约束 异常处理 日志使用
  • 原文地址:https://www.cnblogs.com/tuituji27/p/11187599.html
Copyright © 2011-2022 走看看