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. 2018-2-13-win10-uwp-InkCanvas控件数据绑定

    title author date CreateTime categories win10 uwp InkCanvas控件数据绑定 lindexi 2018-2-13 17:23:3 +0800 20 ...

  2. zoj 4124 "Median" (思维?假的图论?)

    传送门 来源:2019 年“浪潮杯”第十届山东省 ACM 省赛 题意: 对于一个包含n个数的(n为奇数)序列val[ ],排序后的 val[ (n+1) / 2 ] 定义为 median: 有 n 个 ...

  3. 如何在centos 7.4 上安装 python 3.6

    yum -y install https://centos7.iuscommunity.org/ius-release.rpmyum -y install python36uyum -y instal ...

  4. 2018-11-5-win10-uwp-异步转同步

    title author date CreateTime categories win10 uwp 异步转同步 lindexi 2018-11-05 10:18:40 +0800 2018-2-13 ...

  5. <Standard Template Library>标准模板库专项复习总结(二)

    4.队列 先进先出(FIFO)表 头文件:#include<queue> 变量的定义:queue<TYPE>queueName 成员函数: bool empty() 空队列返回 ...

  6. Objection基本原理

    1,Objection 的简介 就是一个依赖注入框架,github地址:https://github.com/atomicobject/objection 2,Objection 原理 3,Objec ...

  7. spring cloud Gateway简单使用

    一.引子 2年前有幸使用过一次Spring Cloud (1.5.9),那次用的是ZUUL做网关,没有使用Gateway做网关,一直是个小遗憾.终于在2年后的19年底再次使用Spring Cloud, ...

  8. zabbix安装完成后查看编译参数

    最近学习zabbix分布式监控系统,突然想如何查看自己编译时的参数,最终找到自己想要的结果. 1.首先进入zabbix源码目录 2.用ls -l命令查看是否有一个叫config.log文件 3.这个文 ...

  9. 「CH2201」小猫爬山 解题报告

    CH2201 小猫爬山 背景 Freda和rainbow饲养了N只小猫,这天,小猫们要去爬山.经历了千辛万苦,小猫们终于爬上了山顶,但是疲倦的它们再也不想徒步走下山了(呜咕>_<). 描述 ...

  10. Codeforces Round #519 by Botan Investments(前五题题解)

    开个新号打打codeforces(以前那号玩废了),结果就遇到了这么难一套.touristD题用了map,被卡掉了(其实是对cf的评测机过分自信),G题没过, 700多行代码,码力惊人.关键是这次to ...