tnbapp/src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// import checkPower from '@/utils/check-power.vue'

Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Index',
    component: () => import('@/layout/index.vue'),
    meta: { title: 'bili' },
    children: [
      {
        path: '/',
        name: 'Home',
        component: () => import('@/views/home/index.vue'),
        meta: { title: 'bili' }
      },
      /* 用户稿件模块 */
      {
        path: '/studio',
        name: 'Studio',
        component: () => import('@/views/studio/index.vue'),
        meta: { title: 'Studio' },
        children: [
          {
            path: '/studio',
            name: 'Post',
            component: () => import('@/views/studio/post.vue'),
            meta: {
              title: '稿件列表',
              requireAuth: true
            }
          },
          {
            path: '/studio/upload',
            name: 'Upload',
            component: () => import('@/views/studio/upload.vue'),
            meta: {
              title: '投稿',
              requireAuth: true
            }
          },
          {
            path: '/studio/statistics',
            name: 'Statisticss',
            component: () => import('@/views/studio/statistics.vue'),
            meta: {
              title: '数据统计',
              requireAuth: true
            }
          },
          {
            path: '/studio/comment',
            name: 'Comment',
            component: () => import('@/views/studio/comment.vue'),
            meta: {
              title: '评论',
              requireAuth: true
            }
          },
          {
            path: '/studio/admin/invitation',
            name: 'invitation',
            component: () => import('@/views/admin/invitation.vue'),
            meta: {
              title: '邀请码',
              requireAuth: true
            }
          },
          {
            path: '/studio/admin/examine',
            name: 'Examine',
            component: () => import('@/views/admin/examine.vue'),
            meta: {
              title: '审核视频',
              requireAuth: true
            }
          },
          {
            path: '/studio/admin/userlist',
            name: 'UserList',
            component: () => import('@/views/admin/user-list.vue'),
            meta: {
              title: '用户列表',
              requireAuth: true
            }
          },
          {
            path: '/studio/admin/websetting',
            name: 'WebSetting',
            component: () => import('@/views/admin/web-setting.vue'),
            meta: {
              title: '网页设置',
              requireAuth: true
            }
          },
          {
            path: '/studio/admin/category',
            name: 'Category',
            component: () => import('@/views/admin/category.vue'),
            meta: {
              title: '分区设置',
              requireAuth: true
            }
          }
        ]
      },
      /* 用户状态模块 */
      {
        path: '/u/:userId',
        name: 'UserHome',
        component: () => import('@/views/user/user-home.vue'),
        meta: { title: '用户主页' }
      },
      {
        path: '/u/:userId/post',
        name: 'UserPost',
        component: () => import('@/views/user/user-post.vue'),
        meta: {
          title: '用户投稿'
        },
        children: [
          {
            path: '/u/:userId/video',
            name: 'UserVideoPost',
            component: () => import('@/views/user/user-video.vue'),
            meta: { title: '视频投稿' }
          },
          {
            path: '/u/:userId/audio',
            name: 'UserAudioPost',
            component: () => import('@/views/user/user-audio.vue'),
            meta: { title: '音频投稿' }
          },
          {
            path: '/u/:userId/article',
            name: 'UserArticlePost',
            component: () => import('@/views/user/user-article.vue'),
            meta: { title: '专栏投稿' }
          },
          {
            path: '/u/:userId/album',
            name: 'UserAlbumPost',
            component: () => import('@/views/user/user-album.vue'),
            meta: { title: '用户相薄' }
          }
        ]
      },
      {
        path: '/u/:userId/status',
        name: 'UserStatus',
        component: () => import('@/views/user/user-status.vue'),
        meta: {
          title: '用户状态'
        }
      },
      /* 用户帐号模块 */
      {
        path: '/user',
        name: 'UserCenter',
        component: () => import('@/views/user/userindex.vue'),
        meta: {
          title: '个人中心',
          requireAuth: true
        },
        children: [
          {
            path: '/user/home',
            name: 'MyHome',
            component: () => import('@/views/user/home.vue'),
            meta: {
              title: '个人中心',
              requireAuth: true
            }
          },
          {
            path: '/user/account',
            name: 'UserAccount',
            component: () => import('@/views/user/account.vue'),
            meta: {
              title: '账户设置',
              requireAuth: true
            }
          },
          {
            path: '/user/favlist',
            name: 'UserFavlist',
            component: () => import('@/views/user/favlist.vue'),
            meta: { title: '收藏列表',
              requireAuth: true }
          },
          {
            path: '/user/hislist',
            name: 'UserHislist',
            component: () => import('@/views/user/hislist.vue'),
            meta: { title: '历史记录',
              requireAuth: true }
          },
          {
            path: '/user/follow',
            name: 'UserFollow',
            component: () => import('@/views/user/follow.vue'),
            meta: { title: '关注管理',
              requireAuth: true }
          },
          {
            path: '/user/vip',
            name: 'UserVip',
            component: () => import('@/views/user/vip.vue'),
            meta: { title: '小会员',
              requireAuth: true }
          },
          {
            path: '/user/loginhistory',
            name: 'LoginHistory',
            component: () => import('@/views/user/LoginHistory.vue'),
            meta: { title: '登录历史',
              requireAuth: true }
          }
        ]
      },
      /* VIP 用户模块 */
      {
        path: '/vip',
        name: 'VipCenter',
        component: () => import('@/views/vip/index.vue'),
        meta: {
          title: 'VIP 中心',
          requireAuth: true
        },
        children: [
          {
            path: '/vip/plan',
            name: 'VipPlan',
            component: () => import('@/views/vip/plan.vue'),
            meta: {
              title: 'VIP 套餐', requireAuth: true
            }
          },
          {
            path: '/vip/order',
            name: 'VipOrder',
            component: () => import('@/views/vip/order.vue'),
            meta: {
              title: 'VIP 订单', requireAuth: true
            }
          },
          {
            path: '/vip/pay',
            name: 'VipPay',
            component: () => import('@/views/vip/pay.vue'),
            meta: {
              title: 'VIP 支付', requireAuth: true
            }
          }
        ]
      },
      /* 消息模块 */
      {
        path: '/message',
        name: 'Message',
        component: () => import('@/views/message/index.vue'),
        meta: { title: 'Message' },
        children: [
          {
            path: '/message',
            name: 'MessageHome',
            component: () => import('@/views/message/home.vue'),
            meta: { title: '消息主页' }
          },
          {
            path: '/message/setting',
            name: 'MessageSetting',
            component: () => import('@/views/message/setting.vue'),
            meta: { title: '消息设置' }
          }
        ]
      },
      /* 状态模块 */
      {
        path: '/mblog',
        name: 'Mblog',
        component: () => import('@/views/mblog/mblog.vue'),
        meta: { title: 'bili 状态' }
      },
      /*      {
        path: '/zhihu',
        name: 'Zhihu',
        component: () => import('@/views/home/zhihu.vue'),
        meta: { title: 'bili 知乎' }
      },
      {
        path: '/t66y',
        name: 'T66y',
        component: () => import('@/views/home/t66y.vue'),
        meta: { title: 'bili 草榴' }
      },
      {
        path: '/t66y/page',
        name: 'T66yPage',
        component: () => import('@/views/home/t66ypage.vue'),
        meta: { title: 'bili 草榴页面' }
      },*/
      {
        path: '/search/result',
        name: 'SearchResult',
        component: () => import('@/views/home/search-result.vue'),
        meta: { title: 'bili 搜索结果' }
      },
      {
        path: '/tag/result',
        name: 'TagResult',
        component: () => import('@/views/home/tag-result.vue'),
        meta: { title: 'bili 视频标签' }
      },
      /* 视频模块 */
      {
        path: '/video',
        name: 'Video',
        component: () => import('@/views/video/index.vue'),
        meta: { title: '视频' },
        children: [
        ]
      },
      {
        path: '/video/:id',
        name: 'VideoPage',
        component: () => import('@/views/video/video.vue'),
        meta: { title: '视频页面' }
      },
      /* 音频模块 */
      {
        path: '/audio',
        name: 'Audio',
        component: () => import('@/views/audio/index.vue'),
        meta: { title: '音频' },
        children: [
        ]
      },
      {
        path: '/audio/:id',
        name: 'AudioPage',
        component: () => import('@/views/audio/audio.vue'),
        meta: { title: '音频页面' }
      },
      /* 图片模块 */
      {
        path: '/image',
        name: 'Image',
        component: () => import('@/views/image/index.vue'),
        meta: { title: '图片' },
        children: [
          {
            path: '/image/:id',
            name: 'ImagePage',
            component: () => import('@/views/image/index.vue'),
            meta: { title: '图片主页' }
          }
        ]
      },
      /* 文章模块 */
      {
        path: '/article',
        name: 'Article',
        component: () => import('@/views/article/index.vue'),
        meta: { title: '文章' },
        children: [
        ]
      },
      {
        path: '/article/:id',
        name: 'ArticlePage',
        component: () => import('@/views/article/zhihu.vue'),
        // component: () => import('@/views/article/article.vue'),
        meta: { title: '文章主页' }
      },
      /* 直播模块 */
      {
        path: '/live',
        name: 'live',
        component: () => import('@/views/live/index.vue'),
        meta: { title: '直播1' }
      },
      {
        path: '/live',
        name: 'Live',
        component: () => import('@/views/home/live.vue'),
        meta: { title: 'bili 直播' }
      }
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login.vue'),
    meta: {
      title: '登录'
    }
  },
  {
    path: '*',
    name: '404',
    component: () => import('@/views/404.vue'),
    meta: {
      title: '404'
    }
  }
  /*
      {
        path: '/user',
        name: 'User',
        component: () => import('@/views/user/index.vue')
      },
      {
          path: '/user/studio',
          name: 'StudioIndex',
          component: () => import('@/views/studio/index.vue'),
          meta: {
            title: '个人中心',
            requireAuth: true
          }
        },
        {
          path: '/user/upload',
          name: 'Upload',
          component: () => import('@/views/studio/upload.vue'),
          meta: {
            title: '投稿',
            requireAuth: true
          }
        },
        {
          path: '/user/post',
          name: 'Post',
          component: () => import('@/views/studio/post.vue'),
          meta: {
            title: '稿件列表',
            requireAuth: true
          }
        },
        {
          path: '/user/comment',
          name: 'Comment',
          component: () => import('@/views/studio/comment.vue'),
          meta: {
            title: '评论',
            requireAuth: true
          }
        },
        {
          path: '/user/admin/invitation',
          name: 'invitation',
          component: () => import('@/views/admin/invitation.vue'),
          meta: {
            title: '邀请码',
            requireAuth: true
          }
        },
        {
          path: '/user/admin/examine',
          name: 'Examine',
          component: () => import('@/views/admin/examine.vue'),
          meta: {
            title: '审核视频',
            requireAuth: true
          }
        },
        {
          path: '/user/admin/userlist',
          name: 'Examine',
          component: () => import('@/views/admin/user-list.vue'),
          meta: {
            title: '用户列表',
            requireAuth: true
          }
        },
        {
          path: '/user/admin/websetting',
          name: 'Examine',
          component: () => import('@/views/admin/web-setting.vue'),
          meta: {
            title: '网页设置',
            requireAuth: true
          }
        },
        {
          path: '/user/admin/category',
          name: 'Examine',
          component: () => import('@/views/admin/category.vue'),
          meta: {
            title: '分区设置',
            requireAuth: true
          }
        }*/
]

const router = new VueRouter({
  mode: 'history',
  routes
})

// 路由导航守卫
router.beforeEach((to, from, next) => {
  // const token = window.localStorage.getItem('user')
  // console.log(this.$store.state.webInfo.name)
  // router.app.$options.store
  // 获取网页信息
  /*
  // TODO 网站信息暂时不从后端获取
  if (router.app.$options.store.state.webInfo.name == null) {
    fetch(`/api/media/web/info`, {
      headers: {
        'mblog-Type': 'application/json; charset=UTF-8'
      },
      method: 'GET',
      credentials: 'include'
    }).then(response => response.json())
      .then(json => {
        router.app.$options.store.state.webInfo = json.data
      })
      .catch(e => {
        return null
      })
  }*/

  // 路由发生变化修改页面 title
  if (to.meta.title) {
    document.title = to.meta.title
  }

  const vuexStore = router.app.$options.store
  // router.app.$options.store 就是 this.$store
  /* if (checkPower.updateUserRole(vuexStore.state.user.userInfo)) {
    vuexStore.state.user.userInfo.role = 'ROLE_USER'
    vuexStore.commit('SET_USER_INFO', vuexStore.state.user.userInfo)
  }*/

  // const date = new Date().getTime()
  if (vuexStore.state.user.userInfo != null) {
    if (to.path === '/login') {
      return next({ path: '/' })
    }
    return next()

    // TODO 不判断用户是否过期
    /* if (vuexStore.state.user.userInfo.expireTime > date) {
      if (to.path === '/login') {
        return next({ path: '/' })
      }
      return next()
    } else {
      vuexStore.commit('user/SET_USER_INFO', null)
      return next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }*/
  } else {
    if (to.meta.requireAuth) {
      return next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      return next()
    }
  }
})

router.afterEach((to, from, next) => {
  window.scrollTo(0, 0)
})

export default router