Vue-router中beforeEach钩子函数实现路由拦截,判断用户权限跳转至登录页面。
2018-11-28 16:55
841 查看
网站中很常见的一个需求是登录验证,即未登录时跳转至登录页。在vue项目中,使用vue-route 提供的 beforeRouteUpdate函数可以实现路由判断。
首先在配置的路由中加入 requireAuth: true,代表进入该路由需要验证
[code] { path:'/XXXXX', name:'xxxx', meta: { requireAuth: true // 添加该字段,表示进入这个路由是需要登录的 }, component: resolve => require(['..xxxxx.vue'], resolve) }
然后使用 router.beforeEach 在main.js中注册一个全局的函数。
这里使用localStorage作为判断,localStorage的生命周期是永久的,真实项目中不建议使用。大家可以使用Vuex作为数据存储。
[code]router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (localStorage.user_id) { // 判断当前的user_id是否存在 ; 登录存入的user_id next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将要跳转路由的path作为参数,传递到登录页面 }) } } else { next(); } })
注意:router.beforeEach方法要创建在new Vue之前。
- router.beforeEach 的三个参数
- to:Route:即将要进入的路由
- from:Route:当前正要离开的路由
- next:function()
- next的用法
- next() :进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
- next(false) :中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到
from
路由对应的地址。 - next( { path:'/login' } ): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
确保要调用 next 方法,否则钩子就不会被 resolved。
最后,在执行登录操作时,可以使用跳转时传递的参数回到进入登录前的路由
[code] submitForm(){ var self = this; //这里写登录的操作 //登录成功时 localStorage.user_id=1; if(self.$route.query.redirect){ //如果存在参数 let redirect = self.$route.query.redirect; self.$router.push(redirect);//则跳转至进入登录页前的路由 }else{ self.$router.push('/index');//否则跳转至首页 } },
这样,整个登录的流程就搞定了。
阅读更多相关文章推荐
- vue路由跳转时判断用户是否登录功能的实现
- 使用vue-router beforEach实现判断用户登录跳转路由筛选功能
- Vue-router路由判断页面未登录跳转到登录页面
- Vue-router路由判断页面未登录跳转到登录页面的实例
- AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
- angularjs给Model添加拦截过滤器,路由增加限制,实现用户登录状态判断
- vue-router实现登录和跳转到指定页面,vue-router 传参
- 从零开始-vue.js(2)登录界面之vue-router实现页面的跳转
- angularjs给Model添加拦截过滤器,路由增加限制,实现用户登录状态判断
- vue路由跳转时 判断用户是否处于 登录状态
- vue-router路由跳转判断用户是否存在
- AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
- vue-router--路由传参结合请求数据(页面底部按钮跳转功能实现参考)
- vue路由跳转时 判断用户是否处于 登录状态
- vue-router登录校验后跳转到之前指定页面如何实现
- axios 拦截 , 页面跳转, token 验证(经常用于判断用户是否登录)
- vue通过 vue.mixin(混合)实现 任意页面记录滚动条位置(路由router.query参数一致) 并跳转到上次的位置
- angularjs给Model添加拦截过滤器,路由增加限制,实现用户登录状态判断
- Struts 通过拦截器实现登录后跳转到登录前页面 处理普通Http请求和Ajax请求时拦截配置
- 如何在vue中判断用户是否登录,登录权限