Complete token refresh feature

package.json

@@ -31,8 +31,8 @@
     "@babel/polyfill": "^7.4.0",
     "@vue/cli-plugin-babel": "^3.5.1",
     "@vue/cli-plugin-eslint": "^3.5.1",
-    "@vue/cli-plugin-unit-jest": "^3.5.3",
+    "@vue/cli-plugin-unit-jest": "^3.7.0",
-    "@vue/cli-service": "^3.5.3",
+    "@vue/cli-service": "^3.7.0",
     "@vue/eslint-config-standard": "^4.0.0",
     "@vue/test-utils": "^1.0.0-beta.20",
     "babel-core": "7.0.0-bridge.0",

src/api/post.js

@@ -4,7 +4,7 @@ const baseUrl = '/api/admin/posts'
 
 const postApi = {}
 
-postApi.listLatest = (top) => {
+postApi.listLatest = top => {
   return service({
     url: `${baseUrl}/latest`,
     params: {
@@ -82,4 +82,4 @@ postApi.postStatus = {
     text: '回收站'
   }
 }
-export default postApi
+export default postApi

src/utils/service.js

@@ -12,15 +12,45 @@ const service = axios.create({
   withCredentials: true
 })
 
+function setTokenToHeader(config) {
+  // set token
+  const token = store.getters.token
+  Vue.$log.debug('Got token from store', token)
+  if (token && token.access_token) {
+    config.headers['Admin-Authorization'] = token.access_token
+  }
+}
+
+async function reRequest(error) {
+  const config = error.response.config
+  setTokenToHeader(config)
+  const res = await axios.request(config)
+  return res
+}
+
+let refreshTask = null
+
+async function refreshToken(error) {
+  try {
+    if (refreshTask === null) {
+      refreshTask = store.dispatch('refreshToken', store.getters.token.refresh_token)
+    }
+
+    await refreshTask
+
+    refreshTask = null
+  } catch (err) {
+    Vue.$log.error('Failed to refresh token', err)
+  }
+  // Rerequest the request
+  return reRequest(error)
+}
+
 service.interceptors.request.use(
   config => {
     NProgress.start()
     // TODO set token
-    const token = store.getters.token
+    setTokenToHeader(config)
-    Vue.$log.debug('Got token from store', token)
-    if (token && token.access_token) {
-      config.headers['Admin-Authorization'] = token.access_token
-    }
     return config
   },
   error => {
@@ -57,11 +87,10 @@ service.interceptors.response.use(
       } else if (data.status === 401) {
         // TODO handle 401 status error
         if (store.getters.token && store.getters.token.access_token === data.data) {
-          // Token expired
+          const res = refreshToken(error)
-          // TODO Refresh token
+          if (res !== error) {
-          store.dispatch('refreshToken', store.getters.token.refresh_token).then(response => {
+            return res
-            Vue.$log.debug('Refresh token successfully')
+          }
-          })
         } else {
           // Login
           router.push({ name: 'Login' })