後端訪問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'，只要一致就好）。