vue实现路由权限 :router.beforeEach实现路由判断页面未登录跳转到登录页面(路由拦截)
前面的话在页面发生路由改变时,比如做登录验证,只有验证登录之后才能进入主界面,未登录不能跳转。vue-router提供了导航钩子beforeEach和afterEach,它们会在路由将改变前和改变后触发。那么登录验证就应该在beforeEach钩子完成。概述beforeEach函数有三个参数:to:router即将进入的路由对象 (这个对象中包含name,params,meta等属性)...
前面的话
在页面发生路由改变时,比如做登录验证,只有验证登录之后才能进入主界面,未登录不能跳转。vue-router提供了导航钩子beforeEach和afterEach,它们会在路由将改变前和改变后触发。那么登录验证就应该在beforeEach钩子完成。
概述
beforeEach函数有三个参数:
-
to:router即将进入的路由对象 (这个对象中包含name,params,meta等属性)
-
from:当前导航即将离开的路由 (这个对象中包含name,params,meta等属性)
-
next:Function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的);否则为false,终止导航。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断,然后 进行一个新的导航。
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
afterEach函数不用传next()函数
实例
router.beforeEach((to, from, next)=> {
// console.log("先判断是否登录");
// 如果是登录页则用next方法resolve掉这个钩子
if (to.name == 'Login') {
next();
return;
}
// // 从store中读取是否获取了已登录的信息
var name = store.state.user.name;
if (name == '未登录') {
// // 判断该路由是否需要登录权限
if (to.meta.requireAuth || to.name == null) {
// 把要跳转的地址作为参数传到下一步
next({path: '/', query: {redirect: to.path}})
} else {
next();
}
}
}
}
)
我们在代码中做了一个判断 if (to.name === ‘Login’) ,也就是说当我们要跳转的路由对象是Login时候,才会进入导航守卫中判断条件,当我们点击其他链接跳转其他页正常。
store中的数据
state中保存着user的数据,只能读取,通过this.$store.commit()改变。
点击登录按钮绑定的方法
请求成功之后,改变store中user.name,并且跳转到主页面。
更多推荐
所有评论(0)