背景
登录是一个网站最基础的功能。有人说它很简单,其实不然,登录逻辑很简单,但涉及知识点比较多,如:
密码加密、cookie、session、token、JWT等。
我们看一下传统的做法,前后端统一在一个服务中:
如图所示,逻辑处理和页面放在一个服务中,用户输入用户名、密码后,后台服务在session中设置登录状态,和用户的一些基本信息,
然后将响应(Response)返回到浏览器(Browser),并设置Cookie。下次用户在这个浏览器(Browser)中,再次
访问服务时,请求中会带上这个Cookie,服务端根据这个Cookie就能找到对应的session,从session中取得用户的信息,从而
维持了用户的登录状态。这种机制被称作Cookie-Session机制。
近几年,随着前后端分离的流行,我们的项目结构也发生了变化,如下图:
我们访问一个网站时,先去请求静态服务,拿到页面后,再异步去后台请求数据,最后渲染成我们看到的带有数据的网站。在这种结构下,
我们的登录状态怎么维持呢?上面的Cookie-Session机制还适不适用?
这里又分两种情况,服务A和服务B在同一域下,服务A和服务B在不同域下。在详细介绍之前,我们先普及一下浏览器的同源策略。
同源策略
同源策略是浏览器保证安全的基础,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页同源。
所谓同源是指:
- 协议相同
- 域名相同
- 端口相同
例如:http://www.a.com/login,协议是http
,域名是www.a.com
,端口是80
。只要这3个相同,我们就可以在请求(Request)时带上Cookie,
在响应(Response)时设置Cookie。
同域下的前后端分离
我们了解了浏览器的同源策略,接下来就看一看同域下的前后端分离,首先看服务端能不能设置Cookie,具体代码如下:
后端代码:
@RequestMapping("setCookie")
public String setCookie(HttpServletResponse response){
Cookie cookie = new Cookie("test","same");
cookie.setPath("/");
response.addCookie(cookie);
return "success";
}
我们设置Cookie的path为根目录"/",以便在该域的所有路径下都能看到这个Cookie。
前端代码: