添加对路由的权限判定

src/main.js

@@ -49,6 +49,8 @@ VueAMap.initAMapApiLoader({
 import VueClipboards from 'vue-clipboard2'
 Vue.use(VueClipboards)
 
+import '@/permission'
+
 Vue.config.productionTip = false // 阻止控制台打印生产模式下的消息
 Vue.prototype.baseURL = '//api.reghao.cn'
 new Vue({

src/permission.js

@@ -0,0 +1,26 @@
+import router from './router'
+import { getAccessToken } from '@/utils/auth'
+
+router.beforeEach((to, from, next) => {
+  const needAuth = to.meta.needAuth
+  const token = getAccessToken()
+  if (to.path === '/login' && token !== null) {
+    next({ path: '/' })
+  } else {
+    next()
+  }
+
+  if (needAuth && token === null) {
+    next('/login')
+  } else {
+    next()
+  }
+
+  if (!needAuth) {
+    next()
+  } else {
+    if (token === null) {
+      next('/login')
+    }
+  }
+})

src/router/index.js

@@ -74,22 +74,26 @@ const routes = [
   {
     path: '/my',
     name: 'My',
-    component: My
+    component: My,
+    meta: { needAuth: true }
   },
   {
     path: '/my/account',
     name: 'MyAccount',
     component: My,
+    meta: { needAuth: true },
     children: [
       {
         path: '/my/account/profile',
         name: '个人资料',
-        component: MyProfile
+        component: MyProfile,
+        meta: { needAuth: true }
       },
       {
         path: '/my/account/vip',
         name: '小会员',
-        component: MyVip
+        component: MyVip,
+        meta: { needAuth: true }
       }
     ]
   },
@@ -97,31 +101,37 @@ const routes = [
     path: '/my/post/publish',
     name: 'MyPostPublish',
     component: My,
+    meta: { needAuth: true },
     children: [
       {
         path: '/my/post/publish/video',
         name: '发布视频',
-        component: PostPublishVideo
+        component: PostPublishVideo,
+        meta: { needAuth: true }
       },
       {
         path: '/my/post/publish/audio',
         name: '发布音频',
-        component: PostPublishAudio
+        component: PostPublishAudio,
+        meta: { needAuth: true }
       },
       {
         path: '/my/post/publish/image',
         name: '发布相册',
-        component: PostPublishAlbum
+        component: PostPublishAlbum,
+        meta: { needAuth: true }
       },
       {
         path: '/my/post/publish/article',
         name: '发布文章',
-        component: PostPublishArticle
+        component: PostPublishArticle,
+        meta: { needAuth: true }
       },
       {
         path: '/my/post/publish/file',
         name: '发布文件',
-        component: PostPublishFile
+        component: PostPublishFile,
+        meta: { needAuth: true }
       }
     ]
   },
@@ -129,26 +139,31 @@ const routes = [
     path: '/my/post/list',
     name: 'MyPostList',
     component: My,
+    meta: { needAuth: true },
     children: [
       {
         path: '/my/post/list/video',
         name: '视频稿件',
-        component: UserPostVideo
+        component: UserPostVideo,
+        meta: { needAuth: true }
       },
       {
         path: '/my/post/list/audio',
         name: '音频稿件',
-        component: UserPostAudio
+        component: UserPostAudio,
+        meta: { needAuth: true }
       },
       {
         path: '/my/post/list/image',
         name: '相册稿件',
-        component: UserPostImage
+        component: UserPostImage,
+        meta: { needAuth: true }
       },
       {
         path: '/my/post/list/article',
         name: '文章稿件',
-        component: UserPostArticle
+        component: UserPostArticle,
+        meta: { needAuth: true }
       }
     ]
   },
@@ -156,16 +171,19 @@ const routes = [
     path: '/my/favlist',
     name: 'MyFavlist',
     component: My,
+    meta: { needAuth: true },
     children: [
       {
         path: '/my/favlist/video',
         name: '视频收藏',
-        component: FavlistVideo
+        component: FavlistVideo,
+        meta: { needAuth: true }
       },
       {
         path: '/my/favlist/image',
         name: '相册收藏',
-        component: FavlistImage
+        component: FavlistImage,
+        meta: { needAuth: true }
       }
     ]
   },
@@ -173,11 +191,13 @@ const routes = [
     path: '/my/visit',
     name: 'MyVisit',
     component: My,
+    meta: { needAuth: true },
     children: [
       {
         path: '/my/visit',
         name: '浏览记录',
-        component: HistoryIndex
+        component: HistoryIndex,
+        meta: { needAuth: true }
       }
     ]
   },
@@ -185,269 +205,207 @@ const routes = [
     path: '/my/message',
     name: 'MyMessage',
     component: My,
+    meta: { needAuth: true },
     children: [
       {
         path: '/my/message/send',
         name: '发出的消息',
-        component: MessageIndex
+        component: MessageIndex,
+        meta: { needAuth: true }
       },
       {
         path: '/my/message/receive',
         name: '收到的消息',
-        component: MessageIndex
+        component: MessageIndex,
+        meta: { needAuth: true }
       },
       {
         path: '/my/message/private',
         name: '私信',
-        component: MessageIndex
+        component: MessageIndex,
+        meta: { needAuth: true }
       }
     ]
   },
   {
-    path: '/',
-    name: 'index',
-    component: Home
+    path: '/timeline',
+    name: 'TimelineIndex',
+    component: TimelineIndex,
+    meta: { needAuth: true }
   },
   {
-    path: '/status',
-    name: 'TimelineIndex',
-    component: TimelineIndex
+    path: '/live/:id',
+    name: 'LivePage',
+    component: LivePage,
+    meta: { needAuth: true }
   },
   {
-    path: '/timeline',
-    name: 'TimelineIndex',
-    component: TimelineIndex
+    path: '/my/post/edit/video/:videoId',
+    name: 'PostEditVideo',
+    component: PostEditVideo,
+    meta: { needAuth: true }
   },
   {
-    path: '/status/:statusId',
-    name: 'StatusPage',
-    component: StatusPage
+    path: '/',
+    name: 'index',
+    component: Home,
+    meta: { needAuth: false }
   },
   {
     path: '/video',
     name: 'VideoIndex',
-    component: VideoIndex
+    component: VideoIndex,
+    meta: { needAuth: false }
   },
   {
     path: '/shortvideo',
     name: 'ShortVideoIndex',
-    component: ShortVideoIndex
+    component: ShortVideoIndex,
+    meta: { needAuth: false }
   },
   {
     path: '/video/:id',
     name: 'VideoPage',
-    component: VideoPage
+    component: VideoPage,
+    meta: { needAuth: false }
   },
   {
     path: '/vidlist/:id',
     name: 'VideoList',
-    component: VideoList
-  },
-  {
-    path: '/live/:id',
-    name: 'LivePage',
-    component: LivePage
+    component: VideoList,
+    meta: { needAuth: false }
   },
   {
     path: '/audio',
     name: 'AudioIndex',
-    component: AudioIndex
+    component: AudioIndex,
+    meta: { needAuth: false }
   },
   {
     path: '/audio/:audioId',
     name: 'AudioPage',
-    component: AudioPage
+    component: AudioPage,
+    meta: { needAuth: false }
   },
   {
     path: '/image',
     name: 'ImageIndex',
-    component: ImageIndex
+    component: ImageIndex,
+    meta: { needAuth: false }
   },
   {
     path: '/image/album/:albumId',
     name: 'ImagePage',
-    component: ImagePage
+    component: ImagePage,
+    meta: { needAuth: false }
   },
   {
     path: '/article',
     name: 'ArticleIndex',
-    component: ArticleIndex
+    component: ArticleIndex,
+    meta: { needAuth: false }
   },
   {
     path: '/stream',
     name: 'MessageStream',
-    component: MessageStream
+    component: MessageStream,
+    meta: { needAuth: false }
   },
   {
     path: '/article/:articleId',
     name: 'ArticlePage',
-    component: ArticlePage
+    component: ArticlePage,
+    meta: { needAuth: false }
   },
   {
     path: '/discover',
     name: 'DiscoverIndex',
-    component: DiscoverIndex
+    component: DiscoverIndex,
+    meta: { needAuth: false }
   },
   {
     path: '/search',
     name: 'search',
-    component: Search
+    component: Search,
+    meta: { needAuth: false }
   },
   {
     path: '/user/:id',
     name: 'UserHome',
-    component: UserHome
+    component: UserHome,
+    meta: { needAuth: false }
   },
   {
     path: '/user/:id/video',
     name: 'UserVideo',
-    component: UserVideo
+    component: UserVideo,
+    meta: { needAuth: false }
   },
   {
     path: '/user/:id/image',
     name: 'UserImage',
-    component: UserImage
+    component: UserImage,
+    meta: { needAuth: false }
   },
   {
     path: '/user/:id/audio',
     name: 'UserAudio',
-    component: UserAudio
+    component: UserAudio,
+    meta: { needAuth: false }
   },
   {
     path: '/user/:id/article',
     name: 'UserArticle',
-    component: UserArticle
+    component: UserArticle,
+    meta: { needAuth: false }
   },
   {
     path: '/user/:id/following',
     name: 'UserRelation',
-    component: UserRelation
+    component: UserRelation,
+    meta: { needAuth: false }
   },
   {
     path: '/user/:id/follower',
     name: 'UserRelation',
-    component: UserRelation
-  },
-  {
-    path: '/post/publish',
-    name: 'PostPublish',
-    component: PostPublish
-  },
-  {
-    path: '/post/publish/video',
-    name: 'PostPublishVideo',
-    component: PostPublishVideo
-  },
-  {
-    path: '/post/edit/video/:videoId',
-    name: 'PostEditVideo',
-    component: PostEditVideo
-  },
-  {
-    path: '/my/post/edit/video/:videoId',
-    name: 'PostEditVideo',
-    component: PostEditVideo
-  },
-  {
-    path: '/post/publish/audio',
-    name: 'PostPublishAudio',
-    component: PostPublishAudio
-  },
-  {
-    path: '/post/edit/audio/:audioId',
-    name: 'PostEditAudio',
-    component: PostEditAudio
-  },
-  {
-    path: '/post/publish/image',
-    name: 'PostPublishAlbum',
-    component: PostPublishAlbum
-  },
-  {
-    path: '/post/edit/album/:albumId',
-    name: 'PostEditAlbum',
-    component: PostEditAlbum
-  },
-  {
-    path: '/post/publish/article',
-    name: 'PostPublishArticle',
-    component: PostPublishArticle
-  },
-  {
-    path: '/post/publish/file',
-    name: 'PostPublish',
-    component: PostPublish
-  },
-  {
-    path: '/post/edit/article/:articleId',
-    name: 'PostEditArticle',
-    component: PostEditArticle
-  },
-  {
-    path: '/post/list',
-    name: 'PostList',
-    component: PostList
-  },
-  {
-    path: '/post/video',
-    name: 'UserPostVideo',
-    component: UserPostVideo
-  },
-  {
-    path: '/post/audio',
-    name: 'UserPostAudio',
-    component: UserPostAudio
-  },
-  {
-    path: '/post/image',
-    name: 'UserPostImage',
-    component: UserPostImage
-  },
-  {
-    path: '/post/article',
-    name: 'UserPostArticle',
-    component: UserPostArticle
-  },
-  {
-    path: '/post/analysis',
-    name: 'PostAnalysis',
-    component: PostAnalysis
+    component: UserRelation,
+    meta: { needAuth: false }
   },
   {
     path: '/map',
     name: 'AMap',
-    component: AMap
+    component: AMap,
+    meta: { needAuth: false }
   },
   {
     path: '/bdmap',
     name: 'BdMap',
-    component: BdMap
+    component: BdMap,
+    meta: { needAuth: false }
   },
   {
     path: '/amap',
     name: 'AMap',
-    component: AMap
+    component: AMap,
+    meta: { needAuth: false }
   },
   {
     path: '/vip',
     name: 'Vip',
-    component: Vip
+    component: Vip,
+    meta: { needAuth: false }
   },
   {
     path: '/login',
     name: 'Login',
     component: () => import('@/views/login.vue'),
-    meta: {
-      title: 'login'
-    }
+    meta: { needAuth: false }
   },
   {
     path: '*',
     name: '404',
     component: () => import('@/views/404.vue'),
-    meta: {
-      title: '404'
-    }
+    meta: { needAuth: false }
   }
 ]