vue-router钩子函数实现路由守卫

下面为你详细讲解Vue Router钩子函数实现路由守卫的完整攻略。

钩子函数介绍

Vue Router提供了多个钩子函数，可以在路由发生变化时执行一些操作。以下是常用的钩子函数：

• beforeEach(to, from, next) ：进入路由之前触发，next必须调用，才能进入下一个钩子。其中参数to和from分别表示即将进入的路由和即将离开的路由。
• afterEach(to, from) ：进入路由之后触发。
• beforeRouteEnter(to, from, next) ：在路由进入该组件之前触发，需要注意的是在此钩子函数中无法获取组件实例 this 。
• beforeRouteLeave(to, from, next) ：在路由离开该组件之前触发。

路由守卫

在实际开发中，有时候需要对路由进行一些权限或者其他验证，此时可以通过路由守卫来实现。

在Vue Router中，可以使用beforeEach和beforeRouteEnter钩子函数实现路由的守卫。具体代码如下：

// router.js

// 使用 beforeEach 钩子函数实现路由守卫
router.beforeEach((to, from, next) => {
  // 判断是否需要登录才能访问
  if (to.meta.requireAuth) {
    const isLogin = localStorage.getItem('token') ? true : false;
    if (isLogin) {
      next();
    } else {
      next({
        path: '/login',
        query: {
          redirect: to.fullPath
        }
      })
    }
  } else {
    next();
  }
});

// 在组件内使用 beforeRouteEnter 钩子函数实现路由守卫
beforeRouteEnter(to, from, next) {
  // 判断是否需要登录才能访问
  const isLogin = localStorage.getItem('token') ? true : false;
  if (isLogin) {
    next();
  } else {
    next({
      path: '/login',
      query: {
        redirect: to.fullPath
      }
    })
  }
}

在上面的代码中，我们通过beforeEach钩子函数实现了路由守卫，判断是否需要登录才能访问，并且在路由跳转前根据登录状态进行判断。

在组件中，我们使用beforeRouteEnter钩子函数实现路由守卫，检查是否需要登录并跳转到登录页。

示例说明

以下是两个示例，演示了如何使用Vue Router钩子函数实现路由守卫。

示例一：需要登录才能访问的页面

假设我们需要在某个页面中添加路由守卫，判断是否需要登录才能访问。在路由定义中，我们可以为该路由设置meta属性，用来记录该路由是否需要登录才能访问：

// router.js

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/protected',
    component: Protected,
    meta: { 
      requireAuth: true 
    }
  }
];

在路由守卫中，我们判断该路由是否需要登录才能访问，如果需要，则判断用户是否登录，如果登录则进入该路由，否则跳转到登录页面：

// router.js

router.beforeEach((to, from, next) => {
  // 判断是否需要登录才能访问
  if (to.meta.requireAuth) {
    const isLogin = localStorage.getItem('token') ? true : false;
    if (isLogin) {
      next();
    } else {
      next({
        path: '/login',
        query: {
          redirect: to.fullPath
        }
      })
    }
  } else {
    next();
  }
});

示例二：需要管理员权限才能访问的页面

假设我们需要在某个页面中添加路由守卫，判断是否需要管理员权限才能访问。首先，我们可以在登录时根据用户类型将用户信息保存到localStorage中：

// login.js

// ...登录判断逻辑...

// 将用户信息保存到localStorage中
localStorage.setItem('user', JSON.stringify(user));

在路由守卫中，我们判断该路由是否需要管理员权限才能访问，如果需要，则判断用户是否为管理员，如果是则进入该路由，否则提示无权限：

// router.js

router.beforeEach((to, from, next) => {
  // 判断是否需要管理员权限才能访问
  if (to.meta.requireAdmin) {
    const user = JSON.parse(localStorage.getItem('user'));
    if (user && user.role === 'admin') {
      next();
    } else {
      alert('无权限访问！')
      next(false);
    }
  } else {
    next();
  }
});

在路由定义中，我们可以为该路由设置meta属性，用来记录该路由是否需要管理员权限才能访问：

// router.js

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/admin',
    component: Admin,
    meta: { 
      requireAdmin: true 
    }
  }
];

以上就是Vue Router钩子函数实现路由守卫的完整攻略和两个示例的说明。