Преглед изворни кода

处理由于使用 Vuex.Store 引发的一些小问题

reghao пре 4 година
родитељ
комит
fb179f9ade

+ 1 - 2
src/api/index.js

@@ -23,8 +23,7 @@ $axios.interceptors.request.use(
     const token = store.getters.token
     if (token) {
       // 在请求的 Authorization 首部添加 token
-      config.headers.Authorization = token
-      // config.headers.Authorization = 'Bearer ' + token
+      config.headers.Authorization = 'Bearer ' + token
     }
     return config
   },

+ 5 - 5
src/components/comment/video-comment.vue

@@ -7,16 +7,16 @@
     </v-row>
     <v-row>
       <v-col cols="2" style="padding-top: 0px;">
-        <router-link v-if="this.$store.state.user" :to="`/user/${this.$store.state.user.id}`">
+        <router-link v-if="this.$store.state.user.userInfo" :to="`/user/${this.$store.state.user.userInfo.id}`">
           <v-avatar size="62">
             <v-img
-              :src="this.$store.state.user.avatarUrl"
-              :alt="this.$store.state.user.username"
-              :title="this.$store.state.user.username"
+              :src="this.$store.state.user.userInfo.avatarUrl"
+              :alt="this.$store.state.user.userInfo.username"
+              :title="this.$store.state.user.userInfo.username"
             />
           </v-avatar>
         </router-link>
-        <v-avatar v-if="this.$store.state.user == null" size="62">
+        <v-avatar v-if="this.$store.state.user.userInfo == null" size="62">
           <v-img
             src="/images/head.png"
             alt="头像"

+ 1 - 1
src/components/player/player.vue

@@ -17,7 +17,7 @@ export default {
     }
   },
   mounted() {
-    const userInfo = this.$store.state.user
+    const userInfo = this.$store.state.user.userInfo
     if (userInfo != null) {
       this.userId = userInfo.id.toString()
     } else {

+ 1 - 1
src/components/setting/user-base-setting.vue

@@ -85,7 +85,7 @@ export default {
     }
   },
   created() {
-    this.userInfo = this.$store.state.user
+    this.userInfo = this.$store.state.user.userInfo
   },
   methods: {
     save() {

+ 1 - 1
src/components/setting/user-head-setting.vue

@@ -80,7 +80,7 @@ export default {
     }
   },
   created() {
-    this.userInfo = this.$store.state.user
+    this.userInfo = this.$store.state.user.userInfo
   },
   methods: {
     setFile(value) {

+ 1 - 1
src/components/setting/user-login-log.vue

@@ -66,7 +66,7 @@ export default {
     }
   },
   created() {
-    this.userInfo = this.$store.state.user
+    this.userInfo = this.$store.state.user.userInfo
     this.getLog()
   },
   methods: {

+ 1 - 1
src/components/setting/user-top-image.vue

@@ -80,7 +80,7 @@ export default {
     }
   },
   created() {
-    this.userInfo = this.$store.state.user
+    this.userInfo = this.$store.state.user.userInfo
   },
   methods: {
     setFile(value) {

+ 15 - 4
src/layout/components/head.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-menu v-if="this.$store.state.user" top offset-y>
+  <v-menu v-if="this.$store.state.user.userInfo" top offset-y>
     <template v-slot:activator="{ on, attrs }">
       <v-btn
         dark
@@ -55,7 +55,7 @@ export default {
     }
   },
   created() {
-    this.userInfo = this.$store.state.user
+    this.userInfo = this.$store.state.user.userInfo
   },
   methods: {
     headClick(value) {
@@ -80,7 +80,18 @@ export default {
       }
     },
     logout() {
-      this.$store.commit('setUserInfo', null)
+      // 调用 store/modules/user.js 中的 logout 方法
+      this.$store.dispatch('user/logout').then(() => {
+        if (this.$route.path === '/') {
+          location.reload()
+        } else {
+          this.$router.push('/')
+        }
+      }).catch(() => {
+        console.log('用户登录失败')
+      })
+
+      /* this.$store.commit('setUserInfo', null)
       fetch(`/api/logout`, {
         headers: {
           'Content-Type': 'application/json; charset=UTF-8',
@@ -103,7 +114,7 @@ export default {
         })
         .catch(e => {
           return null
-        })
+        })*/
     }
   }
 }

+ 18 - 7
src/layout/index.vue

@@ -69,10 +69,10 @@
         </template>
         <span>通知</span>
       </v-tooltip>
-      <Head v-if="this.$store.state.user" />
+      <Head v-if="this.$store.state.user.userInfo" />
       <!-- 未登录 -->
       <v-btn
-        v-if="this.$store.state.user == null"
+        v-if="this.$store.state.user.userInfo == null"
         outlined
         @click="goToLoginPage"
       >
@@ -114,7 +114,7 @@ export default {
   mounted() {
   },
   created() {
-    this.userInfo = this.$store.state.user
+    this.userInfo = this.$store.state.user.userInfo
     this.$vuetify.theme.dark = this.$store.state.darkThemOpen
   },
   methods: {
@@ -128,7 +128,18 @@ export default {
       }
     },
     logout() {
-      fetch(`/api/logout`, {
+      // 调用 store/modules/user.js 中的 login 方法
+      this.$store.dispatch('user/logout').then(() => {
+        if (this.$route.path === '/') {
+          location.reload()
+        } else {
+          this.$router.push('/')
+        }
+      }).catch(() => {
+        console.log('用户登录失败')
+      })
+
+      /* fetch(`/api/logout`, {
         headers: {
           'Content-Type': 'application/json; charset=UTF-8',
           'X-XSRF-TOKEN': this.$cookies.get('XSRF-TOKEN')
@@ -150,7 +161,7 @@ export default {
         })
         .catch(e => {
           return null
-        })
+        })*/
     },
     goToLoginPage() {
       this.$router.push('/login')
@@ -165,10 +176,10 @@ export default {
       this.$router.push('/')
     },
     goToUserHome() {
-      if (this.$route.path === '/user/' + this.$store.state.user.id) {
+      if (this.$route.path === '/user/' + this.$store.state.user.userInfo.id) {
         return
       }
-      this.$router.push('/user/' + this.$store.state.user.id)
+      this.$router.push('/user/' + this.$store.state.user.userInfo.id)
     }
   }
 }

+ 7 - 7
src/layout/studio.vue

@@ -5,17 +5,17 @@
       app
       clipped
     >
-      <router-link :to="`/user/${this.$store.state.userInfo.id}`">
+      <router-link :to="`/user/${this.$store.state.user.userInfo.id}`">
         <v-row justify="center" align="center">
           <v-col cols="12" style="text-align: center">
             <v-avatar size="62">
-              <v-img :src="this.$store.state.userInfo.avatarUrl" />
+              <v-img :src="this.$store.state.user.userInfo.avatarUrl" />
             </v-avatar>
           </v-col>
         </v-row>
         <v-row justify="center" align="center">
           <v-col cols="12" style="text-align: center">
-            {{ this.$store.state.userInfo.username }}
+            {{ this.$store.state.user.userInfo.username }}
           </v-col>
         </v-row>
       </router-link>
@@ -35,7 +35,7 @@
         </v-list-item>
       </router-link>
       <v-divider />
-      <div v-if="CheckPower.checkPower(this.$store.state.userInfo) == 'admin'">
+      <div v-if="CheckPower.checkPower(this.$store.state.user.userInfo) == 'admin'">
         <router-link v-for="item in adminList" :key="item.text" :to="item.link">
           <v-list-item
             link
@@ -102,10 +102,10 @@
         <span>通知</span>
       </v-tooltip>
       <!--  登陆后 -->
-      <Head v-if="this.$store.state.userInfo" />
+      <Head v-if="this.$store.state.user.userInfo" />
       <!-- 未登录 -->
       <v-btn
-        v-if="this.$store.state.userInfo == null"
+        v-if="this.$store.state.user.userInfo == null"
         outlined
         @click="goToLoginPage"
       >
@@ -168,7 +168,7 @@ export default {
       this.$router.push('/studio/upload')
     },
     goToUserHome() {
-      this.$router.push('/user/' + this.$store.state.userInfo.id)
+      this.$router.push('/user/' + this.$store.state.user.userInfo.id)
     }
 
   }

+ 10 - 7
src/router/index.js

@@ -3,8 +3,8 @@ import VueRouter from 'vue-router'
 import Index from '@/layout/index.vue'
 import Home from '@/views/home/index.vue'
 import checkPower from '@/utils/check-power.vue'
-Vue.use(VueRouter)
 
+Vue.use(VueRouter)
 const routes = [
   {
     path: '/',
@@ -215,19 +215,22 @@ router.beforeEach((to, from, next) => {
         return null
       })
   }*/
-  // 路由发生变化修改页面title
+
+  // 路由发生变化修改页面 title
   if (to.meta.title) {
     document.title = to.meta.title
   }
-  if (checkPower.updateUserRole(router.app.$options.store.state.userInfo)) {
-    router.app.$options.store.state.userInfo.role = 'ROLE_USER'
-    router.app.$options.store.commit('setUserInfo', router.app.$options.store.state.userInfo)
+
+  // router.app.$options.store 就是 this.$store
+  if (checkPower.updateUserRole(router.app.$options.store.state.user.userInfo)) {
+    router.app.$options.store.state.user.userInfo.role = 'ROLE_USER'
+    router.app.$options.store.commit('setUserInfo', router.app.$options.store.state.user.userInfo)
   }
 
   const date = new Date().getTime()
-  if (router.app.$options.store.state.userInfo != null) {
+  if (router.app.$options.store.state.user.userInfo != null) {
     // console.log(router.app.$options.store.state.userInfo.expireTime > date, router.app.$options.store.state.userInfo.expireTime, date)
-    if (router.app.$options.store.state.userInfo.expireTime > date) {
+    if (router.app.$options.store.state.user.userInfo.expireTime > date) {
       if (to.path === '/login') {
         return next({ path: '/' })
       }

+ 1 - 1
src/views/home/history.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container fill-height>
-    <NoLoginShow v-if="this.$store.state.user == null" />
+    <NoLoginShow v-if="this.$store.state.user.userInfo == null" />
     <div v-else>
       <v-row>
         <v-col>

+ 1 - 1
src/views/home/playlist.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container fill-height>
-    <NoLoginShow v-if="this.$store.state.user == null" />
+    <NoLoginShow v-if="this.$store.state.user.userInfo == null" />
   </v-container>
 </template>
 

+ 1 - 1
src/views/home/subscribe.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container fill-height>
-    <NoLoginShow v-if="this.$store.state.user == null" />
+    <NoLoginShow v-if="this.$store.state.user.userInfo == null" />
   </v-container>
 </template>
 

+ 5 - 5
src/views/user/index.vue

@@ -25,7 +25,7 @@
           </h2>
         </v-col>
         <v-col
-          v-if="this.$store.state.user && this.$store.state.user.id === id"
+          v-if="this.$store.state.user.userInfo && this.$store.state.user.userInfo.id === id"
           cols="6"
           md="4"
           class="hidden-sm-and-down ml-0 pl-4"
@@ -33,7 +33,7 @@
           <v-btn color="primary" @click="goToSetting">自定义频道</v-btn> <v-btn color="primary" @click="goToStudio">创作中心</v-btn>
         </v-col>
         <v-col
-          v-if="this.$store.state.user == null || this.$store.state.user.id != id"
+          v-if="this.$store.state.user.userInfo == null || this.$store.state.user.userInfo.id != id"
           cols="6"
           md="4"
         >
@@ -136,9 +136,9 @@ export default {
   },
   methods: {
     getUserInfo() {
-      // console.log(this.$store.state.user)
-      // if (this.$store.state.user !== null && this.$store.state.user.id === this.id) {
-      //   this.userInfo = this.$store.state.user
+      // console.log(this.$store.state.user.userInfo)
+      // if (this.$store.state.user.userInfo !== null && this.$store.state.user.userInfo.id === this.id) {
+      //   this.userInfo = this.$store.state.user.userInfo
       //   document.title = this.userInfo.username
       //   return
       // }

+ 3 - 3
src/views/vip/index.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container fill-height>
-    <v-row v-if="this.$store.state.user == null || checkPower.checkVip(this.$store.state.user) === false" justify="center" align="center">
+    <v-row v-if="this.$store.state.user.userInfo == null || checkPower.checkVip(this.$store.state.user.userInfo) === false" justify="center" align="center">
       <v-col>
         <v-card
           class="mx-auto"
@@ -31,11 +31,11 @@
             height="200px"
             src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
           >
-            <v-card-title>你好,尊贵的VIP:  {{ this.$store.state.user.username }}</v-card-title>
+            <v-card-title>你好,尊贵的VIP:  {{ this.$store.state.user.userInfo.username }}</v-card-title>
           </v-img>
 
           <v-card-text class="text--primary">
-            <div>VIP到期时间: <strong>{{ TimeUtil.renderTime(this.$store.state.user.vipStopTime) }}</strong></div>
+            <div>VIP到期时间: <strong>{{ TimeUtil.renderTime(this.$store.state.user.userInfo.vipStopTime) }}</strong></div>
             <div>剩余观看次数:<strong> ∞ </strong></div>
           </v-card-text>