feat(projects): get user info in router guard and remove in localStorage. close #459

src/router/guard/route.ts

@@ -92,6 +92,7 @@ export function createRouteGuard(router: Router) {
  * @param to to route
  */
 async function initRoute(to: RouteLocationNormalized): Promise<RouteLocationRaw | null> {
+  const authStore = useAuthStore();
   const routeStore = useRouteStore();
 
   const notFoundRoute: RouteKey = 'not-found';
@@ -125,6 +126,9 @@ async function initRoute(to: RouteLocationNormalized): Promise<RouteLocationRaw
   // the auth route is initialized
   // it is not the "not-found" route, then it is allowed to access
   if (routeStore.isInitAuthRoute && !isNotFoundRoute) {
+    // update user info
+    await authStore.updateUserInfo();
+
     return null;
   }
   // it is captured by the "not-found" route, then check whether the route exists

src/store/modules/auth/index.ts

@@ -8,7 +8,7 @@ import { fetchGetUserInfo, fetchLogin } from '@/service/api';
 import { localStg } from '@/utils/storage';
 import { $t } from '@/locales';
 import { useRouteStore } from '../route';
-import { clearAuthStorage, getToken, getUserInfo } from './shared';
+import { clearAuthStorage, getToken } from './shared';
 
 export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
   const route = useRoute();
@@ -18,7 +18,12 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
 
   const token = ref(getToken());
 
-  const userInfo: Api.Auth.UserInfo = reactive(getUserInfo());
+  const userInfo: Api.Auth.UserInfo = reactive({
+    userId: '',
+    userName: '',
+    roles: [],
+    buttons: []
+  });
 
   /** is super role in static route */
   const isStaticSuper = computed(() => {
@@ -87,14 +92,23 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
     localStg.set('token', loginToken.token);
     localStg.set('refreshToken', loginToken.refreshToken);
 
+    // 2. get user info and update store
+    const pass = await updateUserInfo();
+
+    if (pass) {
+      token.value = loginToken.token;
+
+      return true;
+    }
+
+    return false;
+  }
+
+  async function updateUserInfo() {
     const { data: info, error } = await fetchGetUserInfo();
 
     if (!error) {
-      // 2. store user info
-      localStg.set('userInfo', info);
-
-      // 3. update store
-      token.value = loginToken.token;
+      // update store
       Object.assign(userInfo, info);
 
       return true;
@@ -110,6 +124,7 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
     isLogin,
     loginLoading,
     resetStore,
-    login
+    login,
+    updateUserInfo
   };
 });

src/store/modules/auth/shared.ts

@@ -5,27 +5,8 @@ export function getToken() {
   return localStg.get('token') || '';
 }
 
-/** Get user info */
-export function getUserInfo() {
-  const emptyInfo: Api.Auth.UserInfo = {
-    userId: '',
-    userName: '',
-    roles: [],
-    buttons: []
-  };
-  const userInfo = localStg.get('userInfo') || emptyInfo;
-
-  // fix new property: buttons, this will be removed in the next version `1.1.0`
-  if (!userInfo.buttons) {
-    userInfo.buttons = [];
-  }
-
-  return userInfo;
-}
-
 /** Clear auth storage */
 export function clearAuthStorage() {
   localStg.remove('token');
   localStg.remove('refreshToken');
-  localStg.remove('userInfo');
 }

src/typings/storage.d.ts

@@ -18,8 +18,6 @@ declare namespace StorageType {
     mixSiderFixed: CommonType.YesOrNo;
     /** The refresh token */
     refreshToken: string;
-    /** The user info */
-    userInfo: Api.Auth.UserInfo;
     /** The theme color */
     themeColor: string;
     /** The theme settings */