vue中页面跳转拦截器的实现方法


Posted in Javascript onAugust 23, 2017

本文主要给大家介绍的是关于vue页面跳转拦截器的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍:

登录拦截逻辑

第一步:路由拦截

首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由, 否则就进入登录页面。在路由管理页面添加meta字段

import Vue from 'vue'
import Router from 'vue-router'


Vue.use(Router)


const routes = [
 {
 path: '/',
 name: "欢迎",
 meta: {
   requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的
  },
 component: resolve => require(["../components/Hello.vue"], resolve)
 },
 {
 path: '/login',
 name: "登录",
 /*meta: {
   requireAuth: false, // 添加该字段,表示进入这个路由是需要登录的
  },*/
 component: resolve => require(["../view/login/login.vue"], resolve)
 }
]


export default new Router({
 base: "/",
 routes
})

定义完路由后,我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。

所以在main.js加上

router.beforeEach((to, from, next) => {
 if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
  if (store.state.token) { // 通过vuex state获取当前的token是否存在
   next();
  }
  else {
   next({
    path: '/login',
    query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
   })
  }
 }
 else {
  next();
 }
})

每个钩子方法接收三个参数:

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

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

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

     * next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。

     * next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。

     * next(‘/') 或者 next({ path: ‘/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

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

其中,to.meta中是我们自定义的数据,其中就包括我们刚刚定义的requireAuth字段。通过这个字段来判断该路由是否需要登录权限。需要的话,同时当前应用不存在token,则跳转到登录页面,进行登录。登录成功后跳转到目标路由。

完成后,我们可以在登录页面。控制用户登录成功后,vuex的token状态改变就可以了

<script>
export default {
 methods:{
 login(){
  this.$store.commit('setToken','true');  //改变token状态
  let redirect = decodeURIComponent(this.$route.query.redirect || '/'); 获取登录成功后要跳转的路由。
  this.$router.push({
  path: redirect
  })
 }
 }
}
</script>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 常用方法总结
Jun 03 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
ExtJS DOM元素操作经验分享
Aug 28 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
微信小程序实现点击页面出现文字
Sep 21 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 #jQuery
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 #Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 #Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 #jQuery
浅谈vue-lazyload实现的详细过程
Aug 22 #Javascript
关于定制FileField中的上传文件名称问题
Aug 22 #Javascript
React复制到剪贴板的示例代码
Aug 22 #Javascript
You might like
php多层数组与对象的转换实例代码
2013/08/05 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
PHP错误机制知识汇总
2016/03/24 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
python实现微信自动回复功能
2018/04/11 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
wxPython的安装与使用教程
2018/08/31 Python
利用python计算时间差(返回天数)
2019/09/07 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
通过python检测字符串的字母
2020/02/18 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
保安队长职务说明书
2014/02/23 职场文书
保安2014年终工作总结
2014/12/06 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android