每次刷新页面时都需要重新进行登录,这是当前系统的最大痛点。之所以会有此情况的发生是由于每次刷新页面时都会重新的加载javascript代码。而JS代码每执行一次便会重新初始化一次TeacherService,随之带来的便是其中的isLogin数据源被重置为false。显示登录组件也就完成的正常的。
看来要解决用户刷新后记录上一次的登录状态的问题,把这个登录状态放到每次刷新都会重新执行的代码中是不行了。为了解决页面刷新后代码被重新加载而导致无法使用代码记录登录状态的问题,浏览器提供了三个内置对象:document.cookie、Window.sessionStorage、Window.localStorage来解决此问题。使用以以三个对象可以记录在浏览中记录一些临时数据,当浏览器刷新时这些数据也不会丢失。
>[info] 除上述三者以外,还提供了IndexedDB以及Web SQL用以处理相对复杂以及不太小的数据。
三者虽然都能起到存储数据的目的,但也有少许的不同。document.cookie出现的最早,未提供任何的API供外部调用,所以使用起来也最不方便;另两者的出现弥补了document.cookie的不足,是对document.cookie的补充。
| | document.cookie | Window.sessionStorage | Window.localStorage |
| --- | --- | --- | ---|
| 出现的时间 | 早 | 晚 | 晚 |
| 存储空间 | 4K | 5M | 5M |
| API | 无 | 有 | 有 |
| 刷新后保持数据 | 是 | 是 | 是 |
| 关闭窗口时清除数据★ | 否 | 是 | 否 |
| 多窗口访问同域名时共享数据★ | 是 | 否 | 是 |
* ★ 这两项为互斥条件,关闭窗口时是否清除数据决定了多窗口访问同域名时数据是否能够共享。
结合上述特点,本例中将采用Window.sessionStorage来记录用户的登录状态,当TeacherService中的isLogin方法被调用时,将传入的登录状态值缓存Window.sessionStorage。当程序初始化时按以下流程初始化用户登录状态。
![](https://img.kancloud.cn/44/ae/44ae9455b6bf4fba71bc6d406e571a83_465x458.png)
# setIsLogin
src/app/service/teacher.service.ts
```typescript
/**
* 设置登录状态
* @param isLogin 登录状态
*/
setIsLogin(isLogin: boolean) {
window.sessionStorage.setItem('isLogin', isLogin ? '1' : '0'); ➊
this.isLogin.next(isLogin);
}
```
* ➊ sessionStorage只能存储string类型。所以将isLogin转换为字符串'1'、'0'进行存储。
# 获取登录状态
src/app/service/teacher.service.ts
```typescript
/** 数据源 */
private isLogin: new BehaviorSubject<boolean>(false); ✘
private isLogin: BehaviorSubject<boolean>; ➊
/** 数据源对应的订阅服务 */
public isLogin$ = this.isLogin.asObservable(); ✘
public isLogin$: Observable<boolean>; ➊
constructor(private httpClient: HttpClient) {
let isLogin: string = window.sessionStorage.getItem('isLogin'); ➋
if (isLogin === null) {
isLogin = '0';
}
this.isLogin = new BehaviorSubject(isLogin === '0' ? false : true); ➊
this.isLogin$ = this.isLogin.asObservable(); ➊
}
```
* ➊ 由暴力的将登录状态初始化为false,变更为根据sessionStorage的缓存值来设置
* ➋ sessionStorage存的时候只支持字符串,取出的结果必然也是字符串类型
# 测试
此时再次登录系统,刷新后已经不再显示登录组件了。
![](https://img.kancloud.cn/e1/8f/e18f16127861c1b96a6b9e902eded924_1425x366.gif)
同上图还可以看出,两个访问了相同地址的窗口间相互独立。任意一个窗口的登录与注销都不会影响到其它的窗口。而这利益于sessionStorage的特性:刷新后保持数据以及多窗口访问同域名时**不**共享数据
浏览器的控制台提供了查看使用sessionStorage存储数据的详情
![](https://img.kancloud.cn/50/9d/509db51e1ed2fea9531cab814e49737f_1194x406.png)
✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻ 以下内容很重要 ✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻
>[success] 自此以后,每重启一次后台均需要清空一次sessionStorage存储。其它的CORS错误也可能是由于此sessionStorage存储引发的。
✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻ 以上内容很重要 ✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻✻
# 重构代码
当前代码功能虽然实现了但还不够简洁,重构如下:
src/app/service/teacher.service.ts
```typescript
private isLoginCacheKey = 'isLogin'; ➊
constructor(private httpClient: HttpClient) {
const isLogin: string = window.sessionStorage.getItem(this.isLoginCacheKey➊);
this.isLogin = new BehaviorSubject(this.convertStringToBoolean➋(isLogin));
this.isLogin$ = this.isLogin.asObservable();
}
setIsLogin(isLogin: boolean) {
window.sessionStorage.setItem(this.isLoginCacheKey➊, this.convertBooleanToString➌(isLogin));
this.isLogin.next(isLogin);
}
/**
* 字符串转换为boolean
* @param value 字符串
* @return 1 true; 其它 false
*/
convertStringToBoolean➋(value: string) {
return value === '1';
}
/**
* boolean转string
* @param value boolean
* @return '1' true; '0' false;
*/
convertBooleanToString➌(value: boolean) {
return value ? '1' : '0';
}
```
* ➊ 将字符串声明为属性
* ➋ 定义转换方法并调用
* ➌ 定义转换方法并调用
单元测试略🙂
# 参考文档
| 名称 | 链接 | 预计学习时长(分) |
| --- | --- | --- |
| 源码地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step5.1.6](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step5.1.6) | - |
| cookie | [https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie) | 5 |
| sessionStorage | [https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage) | 5 |
| localStorage | [https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage) | 5 |
| IndexedDB | [https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API](https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API) | 5 |
- 序言
- 第一章:Hello World
- 第一节:Angular准备工作
- 1 Node.js
- 2 npm
- 3 WebStorm
- 第二节:Hello Angular
- 第三节:Spring Boot准备工作
- 1 JDK
- 2 MAVEN
- 3 IDEA
- 第四节:Hello Spring Boot
- 1 Spring Initializr
- 2 Hello Spring Boot!
- 3 maven国内源配置
- 4 package与import
- 第五节:Hello Spring Boot + Angular
- 1 依赖注入【前】
- 2 HttpClient获取数据【前】
- 3 数据绑定【前】
- 4 回调函数【选学】
- 第二章 教师管理
- 第一节 数据库初始化
- 第二节 CRUD之R查数据
- 1 原型初始化【前】
- 2 连接数据库【后】
- 3 使用JDBC读取数据【后】
- 4 前后台对接
- 5 ng-if【前】
- 6 日期管道【前】
- 第三节 CRUD之C增数据
- 1 新建组件并映射路由【前】
- 2 模板驱动表单【前】
- 3 httpClient post请求【前】
- 4 保存数据【后】
- 5 组件间调用【前】
- 第四节 CRUD之U改数据
- 1 路由参数【前】
- 2 请求映射【后】
- 3 前后台对接【前】
- 4 更新数据【前】
- 5 更新某个教师【后】
- 6 路由器链接【前】
- 7 观察者模式【前】
- 第五节 CRUD之D删数据
- 1 绑定到用户输入事件【前】
- 2 删除某个教师【后】
- 第六节 代码重构
- 1 文件夹化【前】
- 2 优化交互体验【前】
- 3 相对与绝对地址【前】
- 第三章 班级管理
- 第一节 JPA初始化数据表
- 第二节 班级列表
- 1 新建模块【前】
- 2 初识单元测试【前】
- 3 初始化原型【前】
- 4 面向对象【前】
- 5 测试HTTP请求【前】
- 6 测试INPUT【前】
- 7 测试BUTTON【前】
- 8 @RequestParam【后】
- 9 Repository【后】
- 10 前后台对接【前】
- 第三节 新增班级
- 1 初始化【前】
- 2 响应式表单【前】
- 3 测试POST请求【前】
- 4 JPA插入数据【后】
- 5 单元测试【后】
- 6 惰性加载【前】
- 7 对接【前】
- 第四节 编辑班级
- 1 FormGroup【前】
- 2 x、[x]、{{x}}与(x)【前】
- 3 模拟路由服务【前】
- 4 测试间谍spy【前】
- 5 使用JPA更新数据【后】
- 6 分层开发【后】
- 7 前后台对接
- 8 深入imports【前】
- 9 深入exports【前】
- 第五节 选择教师组件
- 1 初始化【前】
- 2 动态数据绑定【前】
- 3 初识泛型
- 4 @Output()【前】
- 5 @Input()【前】
- 6 再识单元测试【前】
- 7 其它问题
- 第六节 删除班级
- 1 TDD【前】
- 2 TDD【后】
- 3 前后台对接
- 第四章 学生管理
- 第一节 引入Bootstrap【前】
- 第二节 NAV导航组件【前】
- 1 初始化
- 2 Bootstrap格式化
- 3 RouterLinkActive
- 第三节 footer组件【前】
- 第四节 欢迎界面【前】
- 第五节 新增学生
- 1 初始化【前】
- 2 选择班级组件【前】
- 3 复用选择组件【前】
- 4 完善功能【前】
- 5 MVC【前】
- 6 非NULL校验【后】
- 7 唯一性校验【后】
- 8 @PrePersist【后】
- 9 CM层开发【后】
- 10 集成测试
- 第六节 学生列表
- 1 分页【后】
- 2 HashMap与LinkedHashMap
- 3 初识综合查询【后】
- 4 综合查询进阶【后】
- 5 小试综合查询【后】
- 6 初始化【前】
- 7 M层【前】
- 8 单元测试与分页【前】
- 9 单选与多选【前】
- 10 集成测试
- 第七节 编辑学生
- 1 初始化【前】
- 2 嵌套组件测试【前】
- 3 功能开发【前】
- 4 JsonPath【后】
- 5 spyOn【后】
- 6 集成测试
- 7 @Input 异步传值【前】
- 8 值传递与引入传递
- 9 @PreUpdate【后】
- 10 表单验证【前】
- 第八节 删除学生
- 1 CSS选择器【前】
- 2 confirm【前】
- 3 功能开发与测试【后】
- 4 集成测试
- 5 定制提示框【前】
- 6 引入图标库【前】
- 第九节 集成测试
- 第五章 登录与注销
- 第一节:普通登录
- 1 原型【前】
- 2 功能设计【前】
- 3 功能设计【后】
- 4 应用登录组件【前】
- 5 注销【前】
- 6 保留登录状态【前】
- 第二节:你是谁
- 1 过滤器【后】
- 2 令牌机制【后】
- 3 装饰器模式【后】
- 4 拦截器【前】
- 5 RxJS操作符【前】
- 6 用户登录与注销【后】
- 7 个人中心【前】
- 8 拦截器【后】
- 9 集成测试
- 10 单例模式
- 第六章 课程管理
- 第一节 新增课程
- 1 初始化【前】
- 2 嵌套组件测试【前】
- 3 async管道【前】
- 4 优雅的测试【前】
- 5 功能开发【前】
- 6 实体监听器【后】
- 7 @ManyToMany【后】
- 8 集成测试【前】
- 9 异步验证器【前】
- 10 详解CORS【前】
- 第二节 课程列表
- 第三节 果断
- 1 初始化【前】
- 2 分页组件【前】
- 2 分页组件【前】
- 3 综合查询【前】
- 4 综合查询【后】
- 4 综合查询【后】
- 第节 班级列表
- 第节 教师列表
- 第节 编辑课程
- TODO返回机制【前】
- 4 弹出框组件【前】
- 5 多路由出口【前】
- 第节 删除课程
- 第七章 权限管理
- 第一节 AOP
- 总结
- 开发规范
- 备用