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. mysql去重, 把url重复且区为空的中去掉、统计重复数据、、结果集去重合并成一行

    delete from 表名 where id not in (select d.id from (SELECT id FROM 表名 GROUP BY c1,c2,c3,c4)as d) #去重复, ...

  2. P1030 队列的基本操作

    题目描述 现在给你一个队列,它一开始是空的,你需要模拟队列的操作.队列的操作包括如下: "push x":将元素 x 放入队列中,其中x是一个int范围内的整数: "po ...

  3. H3C STP配置示例

  4. 深度解读 - TDD(测试驱动开发)

    转自:http://www.jianshu.com/p/62f16cd4fef3 本文结构: 什么是 TDD 为什么要 TDD 怎么 TDD FAQ 学习路径 延伸阅读 什么是 TDD TDD 有广义 ...

  5. CF 453C. Little Pony and Summer Sun Celebration

    CF 453C. Little Pony and Summer Sun Celebration 构造题. 题目大意,给定一个无向图,每个点必须被指定的奇数或者偶数次,求一条满足条件的路径(长度不超\( ...

  6. TransactionDefinition接口中定义了七个事务传播行为

    1.PROPAGATION_REQUIRED如果存在一个事务,则支持当前事务,如果没有事务则开启一个新的事务.使用spring声明式事务,spring使用AOP来支持声明式事务,会根据事务属性,自动在 ...

  7. koa2入门--02.koa2路由

    首先输入在项目文件下使用cmd,输入 npm install koa-router --save const koa = require('koa');//引入koa const Router = r ...

  8. Visio数据视觉化处理

    形状数据的查看的两种方式 定义形状数据:右键单击数据窗口 打勾的代表可以显示 其他没有打勾的就必须要在开发模式才会显示出来 开发模式就是打开开发工具面板 注意其中类型的设置 类型与格式是一一对应的 不 ...

  9. 第二阶段:2.商业需求文档MRD:3.MRD-目标用户分析

    以上是对目标市场的分析! 用户描述是定性.市场统计是定量.用用户分类模型去剖析用户分类. 例子.做百度推广时候的用户分析.不同角色的关注点不同.三个情景:广告售卖,广告投放,分析评估. 用户的使用习惯 ...

  10. scrf 原理及flask-wtf防护

    了解什么是scrf? SCRF跨站点请求伪造Cross—Site Request Forgery) 指恶意用户通过个人用户的点击,然而盗用用户的账号信息,并发送邮件.虚拟货币的转账,以及一些重要的事务 ...