代理设置cookie跨过单点登录

现状

在前后端分离的项目中，最重要的过程就是前后端联调；由于前后端是两个独立的服务，直接在前端请求后端时，由于浏览器的同源政策会产生跨域而请求不到，所以在一般的脚手架的项目中的服务中会有一个代理服务，通过代理我们可以成功请求到后端服务。对于vue-cli我们可以在config/index/js中做如下配置：

module.exports = {
    dev: {
        ...
        proxyTable: {
           '接口统一的前缀，比如/api': {
                target: '代理服务器的IP+端口'
           }
        }
        ...
    }
}

这种在一般情况下就可以，但是如果我们遇到有单点的服务就会出问题了

单点登录

单点登录的作用

为什么会有单点登录，因为对于一个大的公司来说会有许许多多的系统，当我们去打开某个系统的时候肯定是需要相应的账号和密码才能登录的，试想一下如果我想打开多个系统的情况，每次打开一个系统都需要登录一次是不是感觉特别麻烦，这时候单点登录就应运而生了，它的作用就是：

当我们需要进入统一体系下的多个系统时，我们只需要在第一个打开系统中登录一次，剩下的系统我们就不需要再进行登录就直接进入了

因此当我们第一次去登录系统时，会跳转到一个统一的登录界面。

单点登录带来的问题

由于存在单点登录，当我们前端通过代理访问后台接口时，会跳转到单点登录页面，这时候问题就来了，当我们在登录页面输入正确的账号和密码进行登录时，跳转的页面是服务器上对应的页面，而不是我们本地的页面，这种情况下我们就不能在本地进行调试了。

单点登录的验证原理

前面说过单点登录就是为了一个系统登录过下个系统就不需要登录了，那么后台是怎么知道我们之前有没有登录过的呢？其实后台判断的依据就是前端发送请求时，有没有携带相应的cookie，如果有后台就默认你登录了，直接进入系统，没有的话跳转登录页面进行登录，生成一个cookie，之后后面的请求都会带着这个cookie

实现方案

既然知道原理了，那么我们就来在前台的请求上加cookie不就行了。

在axios的请求头中设置cookie

方法如下：

axios({
    header: {cookie: '相应的cookie信息'}
})

通过这种方式设置cookie之后，发现还是会跳转到单点登录，也就是cookie没有携带过去，至于问题猜想的是代理服务没有把相应的cookie传给目标服务器，既然在请求中直接加不行，那接下来就尝试在代理中增加

在webpack服务的代理中设置cookie

方法如下：

dev： {
    proxyTabel: {
        '接口通用前缀，一般是系统名称': {
            target: '目标服务器ip地址和端口',
            onProxyReq: (proxyReq) => {
                proxyReq.setHeader('cookie', '单点登录需要的cookie信息')
            }
        }
    }
}

通过这样设置我们就可以很愉快的跨过单点登录愉快的进行开发了。

注意

由于单点登录信息有过期时间，所有当我们长时间没有进行操作时，需要更新cookie重新访问