前后端分离后的CAS单点登录流程详解

CAS 单点登录Web工作流程

如图流程清晰，可以去官网了解https://github.com/apereo。

下面看前后端分离的架构:

假设公司有多个系统希望能统一登录认证一次都可以访问，如订单管理系统（oms）,商品管理系统(pms),客户管理系统(crm),例如：用户访问 oms 系统拦截请求发现没有登录，就跳转到cas server 去登录，登录完成后签发一个ST，重定向到oms系统，oms拿着回传的参数ST去CAS验证，验证通过后，允许用户访问资源，如果是前后端分离的应用，系统就由原来的单个应用，分为前后端分开部署（动静分离），前端的静态服务（html,css.js），后端的（api接口），这时候用户端浏览器先访问前端加载静态资源，然后再向后端api发起请求，后端api 接口通过过滤器鉴权。如果cas server 登录后跳转到后端服务地址肯定是不行的，这时候可以在服务端i在完成验证后继续跳转到前端地址，index.jsp：

<%@ page import="com.ctrip.framework.apollo.ConfigService" %>
<%@ page import="com.ctrip.framework.apollo.Config" %>



    


<%
   //不同环境前端地址不同（开发，生产）所以通过配置获取
    Config omsConfig = ConfigService.getConfig("oms");
    response.sendRedirect(omsConfig.getProperty("web.front.url",""));
%>

这样通过继续跳转最终到前端页面。

需要注意的地方：

1、前后端分离后需要注意跨域的问题所以要在后端服务响应头设置如下内容：

httpServletResponse.addHeader("Access-Control-Allow-Origin", acaOrigin);//前端域名（不同环境不同可以通过配置读取）
httpServletResponse.addHeader("Access-Control-Allow-Methods","GET,POST,PUT,DELETE,OPTIONS");
httpServletResponse.addHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, *");
httpServletResponse.addHeader("Access-Control-Allow-Credentials", "true");

2、前端访问后端api 地址也要是可以配置的，配置有两种方式，一种在程序构建时注入，一种在程序运行时产生。高性能 Javascript》中有一节提及，“开发高性能应用的一个普遍规则是，只要是能在构建时完成的工作，就不要留到运行时去做”所以前端在编译的时候也需要根据不同环境变量，设置不同的后端地址。