1、在路由添加

meta:{
requireAuth:true
}

完整

{
path: '/xx',
name: 'xx',
component: xx,
meta:{
requireAuth:true
}
},

2、在mian.js中添加

router.beforeEach(function (to, from, next) {
// to 想要去哪里
// from 从哪里来
// next 跳转到哪里
if(to.meta.requireAuth){
// 要去的url只有登陆成功后才能访问
if (store.state.token) {
next()
} else {
next({name: 'login',query: {backUrl: to.fullPath}})
}
// 没有 meta条件,直接跳转
}else{
next()
}
});

3、修改登录页面

目的:原页面->登录页面->跳转原页面

var url = that.$route.query.backUrl;
if(url){
that.$router.push({path: url})
}else{
that.$router.push({path: '/index'})
}

vue拦截器的更多相关文章

  1. vue拦截器Vue.http.interceptors.push

    刚开始学vue,github上down了一个开源项目,看源代码的时候看到了这个地方: /** * @export * @param {any} request * @param {any} next ...

  2. vue拦截器实现统一token,并兼容IE9验证

    项目中使用vue搭建前端页面,并通过axios请求后台api接口,完成数据交互.如果验证口令token写在在每次的接口中,也是个不小的体力活,而且也不灵活.这里分享使用vue自带拦截器,给每次请求的头 ...

  3. vue 拦截器

    拦截器:请求发送之前和请求返回之后的处理 使用:1.config---dev.env.js 开发环境配置 2. prod.env.js 生产 API:'http://www.wpdic.com' 3. ...

  4. Vue 拦截器的使用

    拦截器 可以全局进行拦截器设置.拦截器在发送请求前或响应返回时做一些特殊的处理. 拦截器的注册 Vue.http.interceptors.push({ request: function ( req ...

  5. 04 DRF内容回顾、用户登录 (含跨域) (vuex vue-cookie)、用户认证 (Auth认证)(拦截器)

    1.内容回顾 1.视图中常见的继承 2.频率访问控制源码 3.序列化,反序列化 2.初始化代码 1.后端代码:AuthView (1)目录结构 (2)urls (3)view (4)注释掉cors ( ...

  6. vue 配置了全局的http拦截器,单独某个组件不需要这个拦截器,如何设置

    之前写过关于全局配置http拦截器的随笔,现在有个需求,在微信支付时,生成二维码,页面显示一个遮罩层,二维码页面需要每两秒请求一次接口,若返回结果为已支付,则进行页面跳转,但因为全局http中load ...

  7. Vue添加请求拦截器

    一.现象 统一处理错误及配置请求信息 二.解决 1.安装 axios  , 命令: npm install axios --save-dev 2.在根目录的config目录下新建文件 axios.js ...

  8. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  9. vue 根据接口返回的状态码判断用户登录状态并跳转登录页,登录后回到上一个页面(http拦截器)

    背景:后台接口返回code==501表示用户是未登录状态,需要登录才可访问: 通过http拦截做路由跳转 第一步:src目录下新建http.js文件,内容如下: import Axios from ' ...

随机推荐

  1. slot的使用方法

    参考链接:https://www.cnblogs.com/loveyt/p/9946450.html 插槽的使用其实是很简单,你只需明白以下两点,就很容易理解. 1.插槽是使用在子组件中的, 2.插槽 ...

  2. @RequestBody、@ResponseBody注解是如何将输入输出转换成json的

    @RequestBody.@ResponseBody注解,可以直接将输入解析成Json.将输出解析成Json,但HTTP 请求和响应是基于文本的,意味着浏览器和服务器通过交换原始文本进行通信,而这里其 ...

  3. vue-learning:15 - js - data

    data data属性是一个对象,存放最纯粹的数据,这些数据可以在模板template.计算属性computed.方法methods.监听器watch.过滤器filters.生命周期函数中使用,并且可 ...

  4. Scala中 下划线的用处

    From:   http://congli.iteye.com/blog/2169401 1.作为“通配符”,类似Java中的*.如import scala.math._ 2.:_*作为一个整体,告诉 ...

  5. CP策略含有中文字符提交失败故障解决

    硬件平台:CP5600 系统版本:R80.10 补丁版本:TAKE103 故障现象:提交新增策略失败,日志显示 if the problem persists contact Checkpoint S ...

  6. linux下文件的一些文件颜色的含义

    红色---->代表压缩文件 红色闪烁---->代表链接文件有问题 黄色---->代表设备文件 深蓝色---->代表目录 浅蓝色----->代表链接文件 绿色----> ...

  7. Linux 命令整理 vim

    Vim  一.官方网站 http://www.vim.org 二.背景 所有的 Unix Like 系统都会内建 vi 文书编辑器,但是在我们编程这里开发使用最多的要数 vim命令了. 三.操作 三种 ...

  8. Microsoft Edge 离线安装包下载

    Microsoft Edge 现已准备就绪 下一版 Microsoft Edge 已准备好进行企业评估. 立即下载离线安装程序.查看管理策略并尝试 Internet Explorer 模式. http ...

  9. PHP常用函数拾遗

     PHP中常用过滤函数addslashes().mysql_real_escape_string().mysql_escape_string() 如addslashes().mysql_real_es ...

  10. [wireshark] ip filter

    查ip 时,使用 ip==10.224.37.18 发现无效 使用 ip.dst, 查到了 Match destination: ip.dst == x.x.x.x Match source: ip. ...