angular中使用token来保存登录状态

小鱼儿 2023-02-20 08:24 5阅读 0赞

JWT ：是 JSON Web Tokens 的简称。该Token被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被[认证][Link 1]的用户身份信息，以便于从资源服务器获取资源，也可以增加一些额外的其它业务逻辑所必须的声明信息，该token也可直接被用于认证，也可被加密。

要先引入一个库，然后路由守卫，然后在请求方法中、或者拦截器中配置添加token到请求头。

![截屏2020-06-22下午1.19.44.png][2020-06-22_1.19.44.png]

![image.png][]

客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里。

提交给后台时,浏览器会自动把cookie里的token带给后台,或者浏览器Head的Authorization字段里面放置Token。

在后端如何来接受token令牌呢，从当前请求的cookie上取，如果没有再从header中取。

Angular添加Token到Header中的方法：自定义Http方法，全局使用自动添加Token到Header中，或者使用拦截器。

**步骤：**

① 写一个常量function 将token放在http header的authorization 中

② 依赖注入

③ 引入 angular 的http 服务

④ 封装各类动词的方法在每种请求中都加入 token

之后的所有请求后端都只需要使用自己封装号的这个MyHttp 服务就可以了。

当然登录时需要将token放在localStorage中，注销的时候需要将token移除。

const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json',
        'Authorization': 'my-auth-token'
      })
    };

![image.png][image.png 1]

一次典型的访问场景是：

1.前端输入用户名、密码后台登录

2.后端根据用户ID生成Token、返回给前端

3.前端ajax请求、通过header头部设置 Authorization ：token

4.后端通过Filter、拦截所有请求、处理请求是否合法（token失效、token为空、token过期）

## 单点登录 ##

将含有jwt的cookie的domain设置为顶级域名

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70][]

[Link 1]: http://www.luoxiao123.cn/tag/%E8%AE%A4%E8%AF%81
[2020-06-22_1.19.44.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9wbmcvNDUyOTAxLzE1OTI4MDMyOTUzNzMtZjA3M2IxZjUtNzAwOC00NzMyLWIwMWItYzgwMjUyNDEyYWM4LnBuZw?x-oss-process=image/format,png
[image.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9wbmcvNDUyOTAxLzE1OTI4MDMxNDkwNDktMzY2YzUzOWYtZTlmZC00M2NlLWFjMjctNDdiYTlhNGM5ZTU4LnBuZw?x-oss-process=image/format,png
[image.png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9wbmcvNDUyOTAxLzE1OTI4MDIzNTE2NzYtOTZiZjg0NDMtY2RhNC00MWE1LWIwMWMtMzI5MzBmNjM2MWVlLnBuZw?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210118120834575.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24=,size_16,color_FFFFFF,t_70