vue-router 路由导航守卫

vue 导航钩子函数
         **router.beforeEach**：全局前置守卫，进入路由之前
         **router.beforeResolve**：全局解析守卫，在beforeRouteEnter调用之后调用
          **router.afterEach**：全局后置钩子，进入路由之后

1.vue-router 导航守卫
           router.beforeEach（(to,from,next){

//to 表示 进入到那个路由

//from 从那个路由离开

//next 进入下个路由

}）

2.登录页面之权限管理

main.js

// 路由守卫
// 无论是刷新还是跳转路由，第一个进入的就是这个路由前置钩子函数
router.beforeEach((to, from, next) => {
  store.commit('settoken', localStorage.getItem('token')); // 获取 token
  if (to.meta.requireAuth) {
    // 判断路由是否需要登录权限
    if (store.state.token) {
      // 判断是否存在本地token
      next();
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    }
  } else {
    next();
  }
});

  2.router.js

const routes = [
  {
    path: '/',
    name: 'login',
    component: Login
  },
  {
    path: '/register',
    name: 'register',
    component: () => import("../views/Register.vue")
  },
  {
    path: '/login',
    name: 'login',
    component: () => import("../views/Login.vue")
  },
  {
    path: '/index',
    name: 'index',
    component: () => import("../views/index.vue")
  },
  {
    path: "/botnav",
    name: "botnav",
    component: () => import("../views/Botnav.vue"),
    children: [
      {
        path: "index",
        name: "index",
        component: () => import("../views/index.vue")
      },
      {
        path: "list",
        name: "list",
        component: () => import("../views/List.vue")
      },
      {
        path: "search",
        name: "search",
        component: () => import("../views/search.vue")
      },
      {
        path: "cart",
        name: "cart",
        meta: {
          requireAuth: true // 当出现这个字段，表示这个路由页面需要登录权限
        },
        component: () => import('../views/Cart.vue')
      },
      {
        path: "mine",
        name: "mine",
        meta: {
          requireAuth: true // 当出现这个字段表示路由页面需要登录权限
        },
        component: () => import("../views/Mine.vue")
      }
    ]
  }
];