feat(permission): implement user info storage when user start a new session

Author: lbwa

src/permission/index.js

@@ -3,7 +3,7 @@ import store from 'STORE'
 import loginTypes from 'STORE/modules/login/mutations/types'
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
-import { getTokenFromLocal } from 'UTILS/storage'
+import { tokenFromStorage, usernameFromStorage } from 'UTILS/storage'
 import { MessageBox } from 'element-ui'
 import createDynamicRoutes from './create-routes'
 import constantRoutes from 'ROUTER/routes/constant'
@@ -48,30 +48,23 @@ function errorHandler (e, next, redirectPath) {
   console.error(e)
 }
 
-function routesAddToRouter () {
+function addRoutesToRouter () {
   router.addRoutes(store.getters['login/dynamicRoutes'])
   console.log(
     '%c[Routes creation]: routes has been added!', 'color: yellow',
     store.getters['login/dynamicRoutes']
   )
 }
 
-function createAllRoutes (to, redirectPath, next) {
-  return store.dispatch(
-    'login/fetchUserAccess',
-    getTokenFromLocal()
-  )
-    .then(setDynamicRoutesToStorage)
-    .then(setGlobalRoutesToStorage)
-    .then(() => routesAddToRouter())
-    .catch(e => errorHandler(e, next, redirectPath))
-    // 1. MUST invoke `next({ ...to, replace: true })` to prevent route matching
-    // from occurring before route is added
-    // 2. use `to` route to replace routes occurring before private routes is added
-    .finally(() => {
-      HAS_ROUTES_ADDED = true
-      next({ ...to, replace: true })
-    })
+function createRoutesMap (to, next) {
+  setDynamicRoutesToStorage(store.getters['login/role'])
+  setGlobalRoutesToStorage()
+  addRoutesToRouter()
+  HAS_ROUTES_ADDED = true
+  // 1. MUST invoke `next({ ...to, replace: true })` to prevent route matching
+  // from occurring before route is added
+  // 2. use `to` route to replace routes occurring before private routes is added
+  return next({ ...to, replace: true })
 }
 
 /**
@@ -86,31 +79,52 @@ router.beforeEach((to, from, next) => {
   }
 
   // ! State: User has been logged in (local token).
-  if (getTokenFromLocal()) {
+  if (tokenFromStorage.getItem()) {
     // 1. fetch RolesMap if necessary (when RolesMap stored by back-end)
 
+    // local storage has a accessToken record, but current `login/accessToken`
+    // vuex state is empty string when user activate a new session (eg. new
+    // browser tab)
+    if (!store.getters['login/accessToken']) {
+      return store.dispatch(
+        'login/fetchUserAccess',
+        tokenFromStorage.getItem()
+      )
+        .then(() => {
+          // fill vuex state with user information to prevent infinity loop.
+          store.commit(
+            `login/${loginTypes.SET_ACCESS_TOKEN}`,
+            tokenFromStorage.getItem()
+          )
+          store.commit(
+            `login/${loginTypes.SET_USERNAME}`,
+            usernameFromStorage.getItem()
+          )
+        })
+        .then(() => createRoutesMap(to, next))
+        .catch(e => errorHandler(e, next, to.path))
+    }
+
     // 2. confirm route access by user role, including global routes creation.
     if (!store.getters['login/role']) {
       // 2.1 fetch user role, then routes creation based on user role.
-      return createAllRoutes(to, to.path, next)
+      return store.dispatch(
+        'login/fetchUserAccess',
+        tokenFromStorage.getItem()
+      )
+        .then(() => createRoutesMap(to, next))
+        .catch(e => errorHandler(e, next, to.path))
     }
 
-    // (2.2 optional) re-create private routes based on user role when page
+    // (2.2 optional) Regenerate private routes based on user role when page
     // reload, because vuex state will be preserved by vuex-persistedstate when
     // page reload.
     if (store.getters['login/role'] && !HAS_ROUTES_ADDED) {
-      setDynamicRoutesToStorage(store.getters['login/role'])
-      setGlobalRoutesToStorage()
-      routesAddToRouter()
-      HAS_ROUTES_ADDED = true
       console.log(
-        '%c[Routes creation]: Private routes has been regenerated !',
+        '%c[Routes creation]: Activate private routes regeneration process !',
         'color: yellow;'
       )
-      // 1. MUST invoke `next({ ...to, replace: true })` to prevent route
-      // matching from occurring before route is added
-      // 2. use `to` route to replace routes occurring before private routes is added
-      return next({ ...to, replace: true })
+      return createRoutesMap(to, next)
     }
 
     // 2.2 filter route

src/store/modules/login/getters.js

@@ -2,10 +2,13 @@ export default {
   username (state) {
     return state.username
   },
+  accessToken (state) {
+    return state.accessToken
+  },
   role (state) {
     return state.role
   },
-  // used to add user private routes to global routes map.
+  // used to add user private routes (router.addRoutes) to global routes map.
   dynamicRoutes (state) {
     return state.dynamicRoutes
   },

src/store/modules/login/mutations/index.js

@@ -1,14 +1,17 @@
 import types from './types'
-import { tokenFromLocal } from 'UTILS/storage'
+import { tokenFromStorage, usernameFromStorage } from 'UTILS/storage'
 
 export default {
   [types.SET_USERNAME] (state, username) {
+    username
+      ? usernameFromStorage.setItem(username)
+      : usernameFromStorage.removeItem()
     state.username = username
   },
   [types.SET_ACCESS_TOKEN] (state, accessToken) {
     accessToken
-      ? tokenFromLocal.setItem(accessToken)
-      : tokenFromLocal.removeItem()
+      ? tokenFromStorage.setItem(accessToken)
+      : tokenFromStorage.removeItem()
     state.accessToken = accessToken
   },
   [types.SET_USER_ROLE] (state, role) {

src/utils/request.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { tokenFromLocal } from 'UTILS/storage'
+import { tokenFromStorage } from 'UTILS/storage'
 
 const request = axios.create({
   // Env variables is defined by .env.[mode] files.
@@ -12,7 +12,7 @@ request.interceptors.request.use(req => {
   req.headers['app_key'] = process.env.VUE_APP_KEY
   req.headers['app_secret'] = process.env.VUE_APP_SECRET
 
-  const token = tokenFromLocal.getItem()
+  const token = tokenFromStorage.getItem()
   if (token) req.headers['access_token'] = token
 
   return req

src/utils/storage.js

@@ -22,6 +22,6 @@ function createStorageUtils (key, storage = localStorage) {
   }
 }
 
-export const tokenFromLocal = createStorageUtils(TOKEN_KEY, localStorage)
+export const tokenFromStorage = createStorageUtils(TOKEN_KEY, localStorage)
 
 export const usernameFromStorage = createStorageUtils(USERNAME_KEY, localStorage)