背景登录是一个网站最基础的功能。有人说它很简单，其实不然，登录逻辑很简单，但涉及知识点比较多，如：密码加密、cookie、session、token、JWT等。我们看一下传统的做法，前后端统一在一个服务中：如图所示，逻辑处理和页面放在一个服务中，用户输入用户名、密码后，后台服务在session中设置登录状态，和用户的一些基本信息，然后将响应（Response）返回到浏览器（Browse...
背景
登录是一个网站最基础的功能。有人说它很简单，其实不然，登录逻辑很简单，但涉及知识点比较多，如：
密码加密、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。
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>
$(function () {
$.ajax({
url : "/test/setCookie",
method: "get",
success : function (json) {
console.log(json);
}
});
})
</script>
</head>
<body
最低0.47元/天 解锁文章
2244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
