VIP20/14_Vue项目/day-2/vue2-shop/src/router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import HomeView from '../views/HomeView.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/Login.vue'),
  },
];

const router = new VueRouter({
  routes,
});

// 由于后台管理系统 需要用户登录后才可以访问页面
//  因此这里要拦截所有的路由，校验用户是否登录

router.beforeEach((to, from, next) => {
  // 无论什么情况下 都要确保next被调用一次
  const token = localStorage.getItem('token');

  if (token) {
    // 说明登录过
    if (to.name === 'login') {
      // 如果登录过并且还是去登录页面， 此时就中断当前导航，并重新导航到主页
      return next('/');
    }

    next(); // 放行
  } else {
    // 就没有登录过
    if (to.name === 'login') return next();

    // 如果没有登录，同时 你去的页面还不是登录页面
    // 此时 强制你 去登录页面
    next({ name: 'login' });
  }
});

export default router;