起因
在一个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拦截器的一次实践。
