feat(refresh-token)

articles/index.md

@@ -88,7 +88,7 @@ article.push(...originCopy)
   top: 32px;
   width: 160px;
   height: 104px;
-  animation: upDown 5s linear alternate infinite forwards;
+  /* animation: upDown 5s linear alternate infinite forwards; */
 }
 
 .cat {
@@ -129,11 +129,11 @@ article.push(...originCopy)
 
 .article-time-line,
 .space {
-  transition: left .6s linear;
+  transition: left .4s ease-in-out;
 }
 
 .space {
-  margin: 15px 64px;
+  margin: 0 64px 14px 64px;
   position: absolute;
   width: calc(100% - 300px);
   left: 0;

articles/other/index.md

@@ -1,10 +1,6 @@
 ---
-title: url输入到渲染
+title: 其他知识记录
 author: lvzl
 ---
 
-<script setup>
-  import XmindViewer from '@/XmindViewer'
-</script>
 
-<XmindViewer url="https://mp-cb2e47ef-a802-469a-a81c-2b6efa9f8b60.cdn.bspapp.com/blog-resource/xmind/browser-rendering-flow.xmind"/>

articles/other/nav.js

@@ -1,4 +1,4 @@
 module.exports = {
   navText: '更多',
-  sort: 8
+  sort: 10
 }

articles/other/refresh-token.md

@@ -0,0 +1,57 @@
+---
+title: 自动刷新token
+author: lvzl
+---
+
+拦截器处理token过期的请求
+```js
+import { refreshToken, isRefreshToken } from './refresh-token'
+import { getRefreshToken } from './xxx'
+
+const instance = axios.create();
+
+instance.interceptors.response.use(function (response) {
+    // 2xx 范围内的状态码都会触发该函数。
+    // 对响应数据做点什么
+    if(response.hearders.authorization) { // 有token，就更新token
+      setToken()
+    }
+    return response;
+  }, function (error) {
+    // 超出 2xx 范围的状态码都会触发该函数。
+    // 对响应错误做点什么
+    if(error.response.status === '401' && !isRefreshToken()) { // 代表过期了，这里要排除刷新token的请求
+      const refreshRes = await refreshToken()
+      if(refreshRes) {
+        error.config.Authorization = 'Bearer ' + getRefreshToken() // 一定要获取新的token，更新之前失败请求的token
+        const res = await instance(error.config)
+        return res
+      }
+    }
+    return Promise.reject(error);
+  });
+```
+
+封装重新请求的逻辑
+```js
+import { getRefreshToken } from './xxx' // 从缓存、或者哪里获取刷新token，要考虑不存在的情况
+
+export function isRefreshToken(config) { // 用于判断是否是刷新token的请求
+  return config.__isRefreshToken
+}
+
+let refreshTokenPromise // 这个是为了防止多个请求失败，引起了多次的刷新token调用
+
+export function refreshToken() {
+  if(refreshTokenPromise) return refreshTokenPromise
+  refreshTokenPromise = new Promise(async (res, rej) => {
+      const res = await instance.get('/oauth/refreshtoken', {
+      hearders: { Authorization: 'Bearer ' + getRefreshToken()},
+      __isRefreshToken: true
+    })
+    res(isSuccess(res.code))
+  })
+  refreshTokenPromise.finally(() => {
+    refreshTokenPromise = null
+  })
+}