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;

猜你喜欢

转载自www.cnblogs.com/92xcd/p/9933457.html