[TOC]
>[success] # 登陆逻辑
[参考阮一峰大佬博客](https://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html#comment-text)
![](https://img.kancloud.cn/f3/49/f34999ee35fa12ddb6d7e3dc0a9a75f9_688x454.png)
~~~
思路:前端登陆时进行'表单验证',验证通过后'密码进行加密'后发送给'后端','后端验证密码'没有
错误后,把'session ID'返回给前端,后端有'2'种方式'返回session ID'如下
~~~
>[success] ## 后端设置token,前端从token取回
后端把**session ID**放到**response.headers.token**(这个**token**是由**后端定义**)中,然后**前端**从在**axios**的**响应拦
截器中**的**response.headers.token**取出后拼接后,**手动**存到**cookie**中,如下:
~~~
import Cookies from 'js-cookie' // 引入js cookie
// 创建axios实例
const service = axios.create({
baseURL: process.env.API_ENDPOINT,
withCredentials: true,
timeout: 1000 * 60 * 60
})
// 请求拦截器
service.interceptors.request.use(config => {
// 2. 使用token信息
const TOKEN = Cookies.get('TokenKey');
config.headers['authorization'] = TOKEN;
}, error => {
return Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(response => {
// 1. 储存token信息
const TOKEN = response.headers.token;
Cookies.set('BIM-TOKEN', 'Bearer ' + TOKEN);
}, error => {
return Promise.reject(error)
})
~~~
上面的例子,是在登陆接口成功返回信息时候,在**响应头(response)** 里取出后端给返回的**token信息(session ID)**,然后拼接成这种:**Bearer + token** 的格式,然后添加到**cookie**中或者**localStorage**中,在后续的**接口调用**时,只需要在**请求拦截器**中取出并且放入到请求头的**authorization**属性中即可。
>[success] ## 后端向浏览器中添加Cookie
**后端**可以向**浏览器中**添加**Cookie**, 浏览器会在**添加Cookie**的那次在**Response Header**中添加一个**Set-Cookie**的属性,里面的值的格式就是**key=value**,在后续接口请求时**浏览器**会**自动**在**Request Header**中添加**Cookie**属性,里面的值的格式同样是**key=value**
1. 登陆时**Set-Cookie**
![](https://img.kancloud.cn/38/84/3884338d21968b184ff75284186efe4e_1097x354.png)
2. **后续访问接口时**
![](https://img.kancloud.cn/6c/fa/6cfad3ac3f6ecb39539b15a653b7ae46_1116x667.png)
>[success] ## 退出登陆逻辑
~~~
'退出登陆'时需要清空'cookie',或者给'cookie'设置一个'时间',过期时候'自动清空',或者后端检测到
'session ID'过期了后,返回'状态码',前端在'拦截器'中判断'状态码'后清空'cookie'
~~~
>[info] # 什么是sission ID?
~~~
可以把'sission'当做一个仓库,而'sission ID'是每个仓库的'key'值,用对应的'key'值就能取到仓库
中的信息,如下图举例:'可以把sission'当成是一个'储存用户信息'的'大对象',而'sissiong ID'就是
取用户信息的'key'。
~~~
![](https://img.kancloud.cn/2d/80/2d8084e8c6456bbe33ce1e308a168c3f_332x229.png)