Browse Source

improvement: 增加已登录用户的快捷入口

ChenYangfan 6 years ago
parent
commit
3ec80ca5bc
2 changed files with 26 additions and 4 deletions
  1. 7 2
      src/App.vue
  2. 19 2
      src/views/Home.vue

+ 7 - 2
src/App.vue

@@ -78,7 +78,9 @@ export default {
       if (token) {
         localStorage.setItem('token', token)
         this.$store.commit(SET_TOKEN, { token })
-        this.fetchUserInfo()
+        this.$nextTick(() => {
+          this.fetchUserInfo()
+        })
       }
     }
     handler()
@@ -97,7 +99,10 @@ export default {
         } else {
           this.$router.push({ name: this.$route.name })
         }
-      }).catch(err => this.$setErrorMessage(err.response.data.msg))
+      }).catch(err => {
+        this.$setErrorMessage(err.response.data.msg)
+        this.$router.push({ name: 'home' })
+      })
     }
   }
 }

+ 19 - 2
src/views/Home.vue

@@ -4,10 +4,13 @@
       <h1 class="title">
         SEEC 课堂助手
       </h1>
+      <router-link :to="{name: userInfo.role === 'TEACHER' ? 'teacher' : 'student'}">
+        <c-button v-if="userInfo.name" icon="face" block theme="green" class="mb-32">已登录用户:{{userInfo.name}}</c-button>
+      </router-link>
       <!--      <c-button @click="handleLogin" standout block theme="blue" class="mb-12">去登录</c-button>-->
       <!--      <c-button block theme="blue" @click="handleRegister">去注册</c-button>-->
-      <c-button icon="face" no-bold block theme="blue" standout @click="jumpToLogin">统一认证 - 登录</c-button>
-      <c-button icon="assignment_ind" block theme="green" class="mt-16" @click="jumpToRegister">统一认证 - 注册</c-button>
+      <c-button icon="people" no-bold block theme="blue" standout @click="jumpToLogin">统一认证 - 登录</c-button>
+      <c-button icon="assignment_ind" block theme="blue" class="mt-16" @click="jumpToRegister">统一认证 - 注册</c-button>
     </div>
   </div>
 </template>
@@ -15,9 +18,22 @@
 <script>
 import CButton from '@/components/Basic/CButton'
 import { jumpToLogin, jumpToRegister } from '@/server/auth'
+import { getUserInfo } from '@/server/user'
+import { SET_USER_INFO } from '@/store/types/main-types'
+import { mapState } from 'vuex'
 
 export default {
   components: { CButton },
+  computed: {
+    ...mapState({
+      userInfo: state => state.main.userInfo
+    })
+  },
+  mounted () {
+    getUserInfo().then(res => {
+      this.$store.commit(SET_USER_INFO, { userInfo: res })
+    })
+  },
   methods: {
     // handleLogin () {
     //   this.$router.push({ name: 'login' })
@@ -42,5 +58,6 @@ export default {
 
 .content {
   z-index: 1;
+  width: 280px;
 }
 </style>