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 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
Javascript玩转继承(三)
May 08 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
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返回json数据函数实例
2014/10/09 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
Javascript之文件操作
2007/03/07 Javascript
csdn 批量接受好友邀请
2009/02/19 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
js中eval详解
2012/03/30 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
Python类的用法实例浅析
2015/05/27 Python
Python中特殊函数集锦
2015/07/27 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
python中使用while循环的实例
2019/08/05 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
opencv python如何实现图像二值化
2020/02/03 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
python识别验证码的思路及解决方案
2020/09/13 Python
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
医学生个人求职信范文
2014/02/07 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python