router設置路由攔截

需求：在未登錄的情況下，不能通過路由路徑進入到頁面；

import Vue from 'vue'
import VueRouter from 'vue-router'
import home from '@/views/home'
import login from '@/views/pages/login.vue'
import AssetPortrait from '@/views/pages/AssetPortrait .vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'login',
    component: login
  },
  {
    path: '/home',
    name: 'home',
    component: home,
    meta: {
      requireAuth: true
    },
    children: [
      {
        path: '/AssetPortrait',
        name: 'AssetPortrait',
        component:AssetPortrait,
        }
    ]
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to, from, next) => {
  if (to.matched.some((r) => r.meta.requireAuth)) {
    let user = localStorage.user
    if (user) { // 判斷是否已經登錄
      next()
    } else {
      next({
        path: '/',
        query: { redirect: to.fullPath } // 登錄成功后重定向到當前頁面
      })
    }
  } else {
    next()
  }
  // 如果本地存在 token 則 不允許直接跳轉到 登錄頁面
  if (to.fullPath === '/login') {
    if (localStorage.user) {
      next({
        path: '/home'
      })
    } else {
      next()
    }
  }
})
export default router