@@ -20,8 +20,6 @@ SIMPLE_JWT = {
20
20
}
21
21
```
22
22
23
- 根据你的开发习惯,改为几秒钟都可以。
24
-
25
23
## 登录页面
26
24
27
25
上一章写 ` Login.vue ` 时已经给登录的表单留好了位置,修改对应位置的代码:
@@ -80,13 +78,15 @@ SIMPLE_JWT = {
80
78
.then (function (response ) {
81
79
const storage = localStorage;
82
80
// Date.parse(...) 返回1970年1月1日UTC以来的毫秒数
81
+ // Token 被设置为1分钟,因此这里加上60000毫秒
83
82
const expiredTime = Date .parse (response .headers .date ) + 60000 ;
84
- // 设置 localStorage
83
+ // 设置 localStorage
85
84
storage .setItem (' access.myblog' , response .data .access );
86
85
storage .setItem (' refresh.myblog' , response .data .refresh );
87
86
storage .setItem (' expiredTime.myblog' , expiredTime);
88
87
storage .setItem (' username.myblog' , that .signinName );
89
88
// 路由跳转
89
+ // 登录成功后回到博客首页
90
90
that .$router .push ({name: ' Home' });
91
91
})
92
92
// 读者自行补充错误处理
@@ -121,7 +121,7 @@ SIMPLE_JWT = {
121
121
122
122
## 显示登录状态
123
123
124
- 为了让用户在任意位置都知道自己是否处于登录状态 ,登录显示一般位于页眉中。
124
+ 为了让用户在任意页面都知道自己是否处于登录状态 ,登录显示一般位于页眉中。
125
125
126
126
修改 `BlogHeader.vue` 如下:
127
127
@@ -173,7 +173,7 @@ SIMPLE_JWT = {
173
173
that .hasLogin = true ;
174
174
}
175
175
// 初始 token 过期
176
- // 申请刷新 token
176
+ // 如果有刷新令牌则申请新的token
177
177
else if (refreshToken !== null) {
178
178
axios
179
179
.post ('/api /token /refresh /', {
@@ -213,7 +213,7 @@ SIMPLE_JWT = {
213
213
- 若令牌已过期,检查是否能刷新获取令牌,若成功则确认用户已登录并更新 localStorage 的状态。
214
214
- 其他任何情况下均认为用户未登录,并清空 localStorage。
215
215
216
- 这种方式没有采取在每次请求中向后端确认用户是否登录 ,而是根据本地保存的信息进行判断** (当请求“无害”时)** ,算是减轻后端压力的取巧办法。
216
+ 这种方式没有在每次请求中向后端确认用户是否登录 ,而是根据本地保存的信息进行判断** (当请求“无害”时)** ,算是减轻后端压力的取巧办法。
217
217
218
218
## 看看效果
219
219
0 commit comments