1. 程式人生 > >vue-router封裝

vue-router封裝

使用者是否需要登入

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
const routes = [{
  path: '/',
  redirect: '/home'
  },
  {
    path: '/home',
    name: 'home',
    component: () =>import('./views/Home.vue'),
    meta: {
      requireAuth: true, // 新增該欄位,表示進入這個路由是需要登入的
    },
    children: [{
      path: '/account_management',
      name: 'account_management',
      component: () =>import('./views/admin/account_management.vue')
    }]

  },
  {
    path: '/login',
    name: 'login',
    component: () =>
    import('./views/login/login.vue')
  }

]
const router = new Router({
  routes
})
//路由攔截器
router.beforeEach((to, from, next) => {
  //根據欄位判斷是否路由過濾
  if(to.meta.requireAuth) { // 判斷該路由是否需要登入許可權
    if(localStorage.getItem('sid')) { //身份資訊獲取
      next();
    } else {
      next({
        path: '/login'
      })
    }
  } else {
    next();
  }
});
export default router;