面试题：Vue中如何使用导航守卫来控制用户访问特定路由，举一个身份验证的场景示例

Question

在Vue Router中，导航守卫可以用于多种场景。请描述如何利用导航守卫实现简单的用户身份验证，即用户未登录时不能访问某些特定路由，当访问这些路由时，自动跳转到登录页面。请写出具体代码实现思路及关键代码片段。

Answer 1

1. 代码实现思路：
   • 利用全局前置守卫router.beforeEach，这是在每次路由切换前都会触发的守卫。
   • 在守卫中检查用户的登录状态，通常可以通过检查本地存储（如localStorage）或Vuex中是否存在用户登录标识（例如用户信息、token等）。
   • 如果用户未登录且试图访问特定的受保护路由，将其重定向到登录页面；如果已登录，则允许通过。
2. 关键代码片段： 假设我们使用localStorage存储登录状态，token作为登录标识，路由定义在router/index.js中。

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import Login from '@/views/Login.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
});

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  // 需要登录才能访问的路由
  const requiresAuth = ['/home'];
  if (requiresAuth.includes(to.path) &&!token) {
    next('/login');
  } else {
    next();
  }
});

export default router;