Ana Sayfa Keşfet Yardım
Giriş Yap
reghao
/
tnbapp
1
0
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Kaynağa Gözat

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

reghao 4 yıl önce
ebeveyn
7a30685723
işleme
fb179f9ade
16 değiştirilmiş dosya ile 72 ekleme ve 48 silme
Görünümü Böl Farklılık Durumunu Göster
  1. 1 2
      src/api/index.js
  2. 5 5
      src/components/comment/video-comment.vue
  3. 1 1
      src/components/player/player.vue
  4. 1 1
      src/components/setting/user-base-setting.vue
  5. 1 1
      src/components/setting/user-head-setting.vue
  6. 1 1
      src/components/setting/user-login-log.vue
  7. 1 1
      src/components/setting/user-top-image.vue
  8. 15 4
      src/layout/components/head.vue
  9. 18 7
      src/layout/index.vue
  10. 7 7
      src/layout/studio.vue
  11. 10 7
      src/router/index.js
  12. 1 1
      src/views/home/history.vue
  13. 1 1
      src/views/home/playlist.vue
  14. 1 1
      src/views/home/subscribe.vue
  15. 5 5
      src/views/user/index.vue
  16. 3 3
      src/views/vip/index.vue

+ 1 - 2
src/api/index.js
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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>