feat: 退出逻辑优化，并新增个人中心跳转功能

Author: wangkaiwd

src/layouts/header/index.vue

@@ -14,7 +14,9 @@
           :src="userInfo.avatar"
           alt="">
         <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item command="personal">个人中心</el-dropdown-item>
+          <el-dropdown-item command="personal">
+            <router-link tag="span" to="/userCenter">个人中心</router-link>
+          </el-dropdown-item>
           <el-dropdown-item command="logout">退出登录</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -37,7 +39,6 @@
       ...mapMutations(['CHANGE_NAV']),
       onCommand (command) {
         command = command[0].toUpperCase() + command.slice(1);
-        console.log('command', command);
         this[`on${command}`]();
       },
       onLogout () {
@@ -46,9 +47,6 @@
           err => console.log(err)
         );
       },
-      onPersonal () {
-        console.log('个人中心');
-      }
     }
   };
 </script>

src/router/permission.js

@@ -35,7 +35,7 @@ router.beforeEach((to, from, next) => {
     if (userInfo) {
       const { hasGetUserInfo } = store.state.user;
       if (!hasGetUserInfo) {
-        store.commit('user/CHANGE_USER_INFO', userInfo);
+        store.commit('user/SET_USER_INFO', userInfo);
       }
       const { hasGetRouter } = store.state.router;
       if (hasGetRouter) {
@@ -54,10 +54,10 @@ router.beforeEach((to, from, next) => {
   } else if (to.path === '/login') { // 如果是登录页面
     const userInfo = JSON.parse(localStorage.getItem('userInfo'));
     if (!userInfo) return next();
-    store.commit('user/CHANGE_USER_INFO', userInfo);
+    store.commit('user/SET_USER_INFO', userInfo);
     vm.$message.success('用户已登录');
-    NProgress.done();
     next('/main');
+    NProgress.done();
   } else {
     next();
   }

src/store/modules/router.js

@@ -33,6 +33,9 @@ const router = {
       state.menus = menus;
       state.authInfo = authInfo;
       state.hasGetRouter = hasGetRouter;
+    },
+    SET_ROUTER_STATUS (state, status) {
+      state.hasGetRouter = status;
     }
   },
   actions: {

src/store/modules/user.js

@@ -9,18 +9,21 @@ const user = {
   },
   //同步更改state中的状态
   mutations: {
-    CHANGE_USER_INFO (state, userInfo) {
+    SET_USER_INFO (state, userInfo) {
       localStorage.setItem('userInfo', JSON.stringify(userInfo));
       state.userInfo = userInfo;
       state.hasGetUserInfo = true;
+    },
+    SET_LOGIN_STATUS (state, status) {
+      state.hasGetUserInfo = status;
     }
   },
   //异步更改state中的状态
   actions: {
-    SET_USER_INFO ({ commit }, { params }) {
+    GET_USER_INFO ({ commit }, { params }) {
       return fetchLogin(params).then(
         res => {
-          commit('CHANGE_USER_INFO', res.data);
+          commit('SET_USER_INFO', res.data);
           vm.$router.push('/main');
           return Promise.resolve(res.data);
         },
@@ -30,7 +33,7 @@ const user = {
     AUTH_TOKEN ({ commit }) {
       return fetchAuthToken().then(
         res => {
-          commit('CHANGE_USER_INFO', res.data);
+          commit('SET_USER_INFO', res.data);
           return Promise.resolve();
         },
         err => Promise.reject(err)

src/utils/user.js

@@ -14,6 +14,8 @@ export const getToken = () => {
 export const goLogin = (message) => {
   message && vm.$message.warning(message);
   localStorage.clear();
+  store.commit('router/SET_ROUTER_STATUS', false);
+  store.commit('user/SET_LOGIN_STATUS', false);
   vm.$router.push('/login');
 };
 

src/views/login/index.vue

@@ -59,13 +59,13 @@
       };
     },
     methods: {
-      ...mapActions('user', ['SET_USER_INFO']),
+      ...mapActions('user', ['GET_USER_INFO']),
       ...mapActions('router', ['GET_MENUS']),
       onSubmit () {
         this.$refs.formItem.validate((valid) => {
           if (valid) {
             this.loginLoading = true;
-            this.SET_USER_INFO({ params: this.formItem })
+            this.GET_USER_INFO({ params: this.formItem })
               .then(
                 () => {
                   this.loginLoading = false;