vue前端路由拦截

起因

在一个vue项目中很多页面是需要登录后才有权限访问的，所以需要在前端做路由拦截判断用户是否可以访问该页面。

实现

在自定义路由时添加一个自定义字段requireAuth，用于判断该用户是否已经登录，成功登录的用户可以跳转，否则会重定向到登录页面。

const routes = [
  {
    path: '/',
    name: 'Index',
    meta: {
      requireAuth: true,
    },
    components: Index
  },
  {
    path: '/login',
    component: Login
  }
];

// 页面刷新时,重新赋值token
if(Vue.cookie.get('token')) {
  store.commit('setToken', VueCookie.get('token'));  // 保证页面刷新token仍有效
}

const router = new Router({
  routes
});

router.beforeEach((to, from, next) => {
  if (to.matched.some((r) => r.meta.requireAuth)) {
    if (store.state.token) {   //判断是否已经登录
      next();
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}   //登录成功后重定向到当前页面
      });
    }
  } else {
    next();
  }
});
export default router;

关于vue路由钩子

在上面，我注册了一个全局的路由钩子，通过路由钩子实现了对每个跳转页面进行验证的功能，每个钩子方法接收三个参数：

• to: Route，即将要进入的目标 路由对象

• from: Route， 当前导航正要离开的路由

• next: Function， 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next方法的调用参数。

确保要调用 next 方法，否则钩子就不会被 resolved。

后话

当然光是靠前端拦截是不够的，还需要配合服务器验证，有兴趣的小伙伴可以查看我另一篇文章vue拦截器的一次实践。