vue中路由验证和相应拦截的使用详解


Posted in Javascript onDecember 13, 2017

在web项目中,经常需要根据是否登录进行路由的验证和相应的拦截。

首先,在vuex里的store.js里边写一个存放登录状态,代码如下

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
 state: {
 user: false
 },
 mutations: {
 // 登录
 login (state, user) {
  state.user = user
 },
 // 退出
 logout (state, user) {
  state.user = false
 }
 }
})

路由验证:       

      路由验证用  router.beforeEach( (to, from, next) => {  } 
      这里的to代表要去的路由指向,from是指从哪个路由跳转过来的,next是判断操作,如果为空,表示放行。
      比如:下一跳的路由为‘/watchHouse'或者‘/AgentMsg' ,如果没有登录的话,通过代码 next ({path: '/login'})

跳转到登录的界面。代码如下:

if (!store.state.user && (to.path === '/watchHouse' || to.path === '/AgentMsg')) {
 next({ path: '/login' })
}

比如:在路由‘/my'下,要跳往 ‘/ToolCompute',如果没有登录的话,跳转到登录页面。代码如下:    

if (!store.state.user && (from.path === '/my') && (to.path === '/ToolCompute')) {
 next({ path: '/login' })
}

全部代码:

router.beforeEach((to, from, next) => {
 if (to.path === '/login') {
 next()
 } else {
 if (!store.state.user && (to.path === '/watchHouse' || to.path === '/AgentMsg')) {
  next({ path: '/login' })
 } else {
  next()
 }
 if (!store.state.user && (from.path === '/my') && (to.path === '/ToolCompute')) {
  next({ path: '/login' })
 }
 }
})

需要注意的是,路由验证这个方法函数与vue实例的顺序还有关系。如果写在vue()的后面,下面就会执行,后判断。

如下图所示:

vue中路由验证和相应拦截的使用详解

这样写,当然是可以执行的路由跳转判断的,但是当我们直接在浏览器的地址栏里直接输入我们要跳转的

完整路由信息的时候,这个路由跳转就不会被判断了。如下图所示:

vue中路由验证和相应拦截的使用详解

如果把路由验证写到VUE实例的前面,就不会出现这样的问题了,这样就会先进行路由判断,再进行执行实例里边的内容了。

代码顺序如下所示:

vue中路由验证和相应拦截的使用详解

响应拦截:比如在根实例中通过checkLogin()这个方法去判断,登录信息 的状态,加入登录超时,则进行响应拦截,代码如下。

var app=new Vue({
 el: '#app',
 router,
 store,
 created(){
 checkLogin().then(function (res) {
  if(res.data&&res.data.code==1){
  store.commit('login',true);
  }
  else{
  router.push('/watchHouse-css');
  }
 })
 },
 template: '<App/>',
 components: { App }
})


//响应拦截器
axios.interceptors.response.use(function(res){
 //如果是未登录
 if(res.data&&res.data.code==2){
 app.$alert('登录用户已超时,请重新登录', '提示', {
  confirmButtonText: '确定',
  type:'warning',
  closeOnClickModal:false,
  callback: action => {
  router.push('/watchHouse-css')
  }
 });
 }
 return res;
},function(err){
 return Promise.reject(err);
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript英文日期(有时间)选择器
May 02 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
js数组操作常用方法
May 08 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
Vue-Router的使用方法
Sep 05 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
vue实现nav导航栏的方法
Dec 13 #Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 #Javascript
仿京东快报向上滚动的实例
Dec 13 #Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 #Javascript
vue-router路由懒加载和权限控制详解
Dec 13 #Javascript
JS+canvas画一个圆锥实例代码
Dec 13 #Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 #Javascript
You might like
探讨php中header的用法详解
2013/06/07 PHP
深入PHP变量存储的详解
2013/06/13 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
python中self原理实例分析
2015/04/30 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
在线课程:Skillshare
2019/04/02 全球购物
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
十月份红领巾广播稿
2014/01/22 职场文书
阳光体育活动总结
2014/04/30 职场文书
保护环境倡议书500字
2014/05/19 职场文书
师德师风承诺书
2014/05/23 职场文书
保证书格式
2015/01/16 职场文书
初中运动会前导词
2015/07/20 职场文书
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS