Vue Router 跳转404，路由守卫及配置（登录篇）

在这个前端技术迭代迅速的时代，单页面应用开发中，路由守卫已经是非常常见也是必备的需求，为了控制使用者在各种状态下的路由页面跳转，例如：是否登录，是否有路由权限等等，今天就记录一下在各种登录状态下路由配置和路由守卫。

Vue Router官方文档：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

页面跳转场景：

各登录状态下跳转场景大概可分为以下几种

• 跳转非登录页
• 跳转登录页
• 跳转根路由
• 跳转未定义路由

解决方案：

1. 跳转非登录页

在 router.beforeEach（前置守卫）中判断目标路由是否需要登录，需要登录则重定向到登录页，对于无需登录的如：404，注册，重置密码 等页面，直接进入 next() 即可，不做处理。

// 路由前置守卫
router.beforeEach((to, from, next) => {
  const { meta, name } = to;
  const { isLogin } = meta;
  // token不存在时跳转非登录页，重定向到登录页
  if (!getToken() && name !== 'Login' && isLogin) next({ path: '/login' });
  // 其他场景
  else next();
});

2. 跳转登录页

在 router.beforeEach（前置守卫） 中判断，已登录时重定向到首页，未登录时理所应当到登录页，所以不做处理，直接进 next()。

// 路由前置守卫
router.beforeEach(({ meta, name }, from, next) => {
  const { title, isLogin } = meta;
  if (title) document.title = title;
  
  // token不存在时跳转非登录页，重定向到登录页
  if (!getToken() && name !== 'Login' && isLogin) next({ path: '/login' });
  // token存在时跳转登录页，重定向到首页
  else if (getToken() && name === 'Login') next({ path: '/home' });
  // 其他场景
  else next();
});

3. 跳转根路由

丢失路由路径的情况很常见，比如得到一个链接 http://localhost:8080/#/，如果未定义根路由渲染组件，那么此链接跳转后，会得到异常的空白页面，这要是上了生产，怕是要GG~，但如果你的 / 是像下面这样配置的，虽然不会出现访问根路由空白问题，但也需要兼容未登录时的登录页重定向。

const routes = [
  {
    path: '/',
    name: 'Home',
    meta: {
      title: 'Homepage',
      isLogin: true
    },
    component: () => import('@/views/Home')
  }
];

你还可以通过设置别名的方式来规避根路由空白的问题：
https://next.router.vuejs.org/zh/guide/essentials/redirect-and-alias.html

const routes = [{ path: '/', component: Homepage, alias: '/home' }]

正常情况下访问根路由，要么跳转登录页，要么跳转首页，所以，我们需要进行以下配置：

当你的根路由 / 未进行路由组件配置时，你需要定义访问 / 路径，重定向到 /home 或者 /login 路径，下列代码结合我们第一，第二点配置的路由前置守卫，可以分别适配两种跳转场景，未登录时访问 / 跳转到 /login，已登录时访问 / 跳转到 /home。

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    meta: {
      title: 'Homepage',
      isLogin: true
    },
    component: () => import('@/views/Home')
  },
  {
    path: '/login',
    name: 'Login',
    meta: {
      title: 'Login Page'
    },
    component: () => import('@/views/Home')
  }
];

4. 跳转未定义路由

网页链接在Copy N次的过程中，可能出现丢失路径，或者多加了一段路径的情况，比如 http://localhost:8080/#/mmp~ 然后被测试同学或者客户碰巧用上了，他们打开之后就会发现出现空白页面，还有你就会发现你的bug清单上多了一项，出现这种情况的原因很简单，你没有配置对应的路由渲染组件，所以为了规避这种异常状况，通常我们要配置一个 /404 的路由页面，然后使用通配符路由 * 来重定向到 /404/ 页面。

配置方法如下：

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/404',
    name: 'NotFound',
    meta: {
      title: 'Page not found',
      isLogin: false
    },
    component: () => import('@/views/NotFound')
  },
  // 所有未定义路由，全部重定向到404页
  {
    path: '*',
    redirect: '/404'
  }
];

所有未定义的路径都将匹配 * 这个路由定义，然后重定向到 /404，例如：

• http://localhost:8080/#/jjyy => http://localhost:8080/#/404
• http://localhost:8080/#/mmp => http://localhost:8080/#/404

据说 * 必须放在最后定义，不过我不放在最后好像也能跑？（？？手动黑人问号？？）

router / index.js 代码:

import Vue from 'vue';
import VueRouter from 'vue-router';

import { getToken } from '@/utils/cookies';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    meta: {
      title: 'Home',
      isLogin: true
    },
    component: () => import('@/views/Home')
  },
  {
    path: '/login',
    name: 'Login',
    meta: {
      title: 'Login'
    },
    component: () => import('@/views/Login')
  },
  {
    path: '/404',
    name: 'NotFound',
    meta: {
      title: 'Page not found',
      isLogin: false
    },
    component: () => import('@/views/NotFound')
  },
  // 所有未定义路由，全部重定向到404页，必须放在最后
  {
    path: '*',
    redirect: '/404'
  }
];

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  /**
   * 路由跳转后页面滚动到顶部
   * 详见：https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html
   */
  scrollBehavior: () => ({ y: 0 }),
  routes
});

// 路由前置守卫
router.beforeEach(({ meta, name }, _, next) => {
  const { title, isLogin } = meta;
  if (title) document.title = title;

  // token不存在时跳转非登录页，重定向到登录页
  if (!getToken() && name !== 'Login' && isLogin) next({ path: '/login' });
  // token存在时跳转登录页，重定向到首页
  else if (getToken() && name === 'Login') next({ path: '/home' });
  // 其他场景
  else next();
});

export default router;

路由守卫还有很多应用场景，有空会出一个鉴权篇的路由配置，文中有错误或者有可优化的地方欢迎指出，如果觉得写的不错，别忘记点个点赞和收藏哦，你的认可是我坚持的动力~~～ ｡◕‿◕｡