vue + vueRouter + nginx + python3 接入cas验证实现登陆注销

前端使用vue+vueRouter开发，后端使用Python3开发，web项目部署在nginx上，项目登陆接入cas认证。

思路

大致说一下思路，这东西有点绕，很难讲清楚，可能是我思路还不是很清晰。

1.项目有这些服务：

• web前端
• nginx：web部署在这里
• python后端：提供一个cas认证接口（下面描述中的cas接口指的都是该接口）
• cas认证服务

2.遇到的问题及解决办法

• web前端：

1. 使用axios提供的get请求，请求后端提供cas认证接口，无法实现重定向，不知道什么原因。最后使用在浏览器的地址栏中填入cas接口地址，可以实现重定向；

   window.location.replace();

2. 由于我们有多套环境，如开发环境、测试环境.....，使用的又是在地址栏中输入地址进行直接访问，不同环境地址也不同。于是我在nginx的配置文件上写了一个接口，返回该环境的cas接口地址与web首页地址，进行cas接口请求前，先请求该接口，拿到地址。存web首页地址，为了在登录成功后，后端重定向到web首页用的。
3. 拿到接口，请求cas接口，后端会请求向cas服务发送请求，（cas是记录的，如果没登陆，）cas服务会把页面重定向到cas登陆页（cas/login），此处的重定向会出现一个错误，浏览器无法直接进入cas登陆页面（具体什么错误，时间久了，我也忘了，好像是域名的问题），python后端再提供一个login接口，帮助重定向。在ngxin上做配置，匹配到~/cas/，替换成python后端的地址，使得该重定向变成一个get请求.

具体做法：

web前端做法。

在路由守卫中进行判断

router.beforeEach( (to, from, next) => {})

1. 进入首页之前，判断用户id是否存在cookie中，如果存在，就前往首页。如果不存在，要向后端的cas接口请求cas认证地址与项目首页地址(该接口我写在nginx上)，拿到地址后，使用下面的方法访问cas接口。

   window.location.replace();

2. 然后就是打开cas登录页面，登录。
3. 登录成功后，会被重定向到项目首页，又进入路由守卫。取地址栏中的地址，判断该地址是否从登录成功那里过来的。我的做法是让后端重定向时在地址中带上用户的id与特殊的约定好的一段字符串，以此判断。如果是从登录成功那里来的，直接前往首页。（所以该判断要写在路由守卫中的最开始，并阻止下面的执行）

   router.beforeEach( (to, from, next) => {
   
   	// 拦截从cas登陆页过来的路由
   	let url = to.fullPath;
   	if (url.includes('?cas_user_id=')) {
   		next('index');
   		return false;
   	};
      
   
   });

4. 到首页后拿着用户id获取用户信息即可