1、main.js设置拦截器

router.beforeEach(function (to,from,next) {
if (to.meta.requireAuth) {
if (store.state.token) {
next()
} else {
next({name: 'log',query: {backUrl: to.fullPath}})
}
}else(
next()
)
})

2、路由设置

{ path: '/course',component: Course,meta: { requireAuth: true}}

3、vue页面方法设置,对应main.js设置的backUrl

login() {
this.$axios.post('api/login/',{user:this.user,pwd:this.pwd}).then(ret => {
if (ret.data.code === 1000) {
var obj = {token:ret.data.token,name:ret.data.data}
this.$store.commit('getToken',obj)
var url = this.$route.query.backUrl
if (url) {
this.$router.push({path: url})
} else {
this.$router.push({name:'home'})
} }
if (ret.data.code === 1001) {
alert('用户名或密码错误')
}
if (ret.data.code === 1002) {
alert('请求错误')
}
}).catch(ret => {
console.log(ret)
})
this.user = ''
this.pwd = '' }

「Vue」登陆-路由拦截器的更多相关文章

  1. vue中怎样实现 路由拦截器

    vue中怎样实现 路由拦截器(当用户没有登录的时候,跳转到登录页面,已经登录的时候,不能跳转到登录页,除非后台token失效) 在 我们需要实现这样 一个功能,登录拦截 其实就是 路由拦截,首先在定义 ...

  2. vue 路由拦截器和请求拦截器

    路由拦截器 已路由为导向 router.beforeEach((to,from,next)=>{ if(to.path=='/login' || localStorage.getItem('to ...

  3. Android逆向之旅---静态方式分析破解视频编辑应用「Vue」水印问题

    一.故事背景 现在很多人都喜欢玩文艺,特别是我身边的UI们,拍照一分钟修图半小时.就是为了能够在朋友圈显得逼格高,不过的确是挺好看的,修图的软件太多了就不多说了,而且一般都没有水印啥的.相比较短视频有 ...

  4. JAVAEE——SSH项目实战05:用户注册、登陆校验拦截器、员工拜访客户功能和MD5加密

    作者: kent鹏 转载请注明出处: http://www.cnblogs.com/xieyupeng/p/7170519.html 一.用户注册   显示错误信息到页面上的另一种方法: public ...

  5. (vue.js)axios interceptors 拦截器中添加headers 属性

    (vue.js)axios interceptors 拦截器中添加headers 属性:http://www.codes51.com/itwd/4282111.html 问题: (vue.js)axi ...

  6. 「Vue」起步 - vue-router路由与页面间导航

    vue-router 我们知道路由定义了一系列访问的地址规则,路由引擎根据这些规则匹配找到对应的处理页面,然后将请求转发给页进行处理.可以说所有的后端开发都是这样做的,而前端路由是不存在"请 ...

  7. vue axios请求/响应拦截器

    // main.js中配置 // 引入 axios import Axios from 'axios' // 这时候如果在其它的组件中,是无法使用 axios 命令的. // 但如果将 axios 改 ...

  8. vue使用jsx/axios拦截器设置

    最害怕的就是做过的事情,转几天又忘记了:写过的代码,也模模糊糊不知道哪里去了,所以告诉自己最好把每天遇到的问题记录下来,好,开始. 新公司要搭个vue后台框架,所以用了简简单单的 vue+iview+ ...

  9. vue页面跳转拦截器

    登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录页面.在路由管 ...

随机推荐

  1. mfc 嵌套类

    嵌套类 一. 嵌套类 嵌套类的定义 将某个类的定义放在另一个类的内部,这样的类定义,叫嵌套类. class AAA { int aaa; class BBB { int bbb; //其它成员或者函数 ...

  2. 继承类中static数据值

    class A{ static int num = 1; public static void Display(){ System.out.println( num ); } } class B ex ...

  3. centos7 php性能调优

    php-ini优化 vi /etc/php.ini 打开php的安全模式,控制php执行危险函数, 默认是Off,改为On sql.safe_mode = Off 关闭php头部信息, 隐藏版本号, ...

  4. 批量备份H3C交换机路由器配置

    第一种(使用ftp下载配置文件): #!/bin/bash datetime=`date +%Y%m%d` BAKTIME=`date +%Y%m%d%H%M%S` user="admin& ...

  5. android listview addheaderview viewpager

    just set viewPager's onTouchListener,like this: viewPager.setOnTouchListener(new OnTouchListener() { ...

  6. Linux内核分析——第三周学习笔记20135308

    第三周 构造一个简单的Linux系统MenuOS 计算机三个法宝: 1.存储程序计算机 2.函数调用堆栈 3.中断 操作系统两把宝剑: 1.中断上下文的切换:保存现场和恢复现场 2.进程上下文的切换 ...

  7. Alpha版本总结

    Alpha版本总结 General Questions a)     What went well?  Why? 成功之处:界面设计简洁,功能吸引用户. 原因:铁道大学学生上自习不方便,没有固定的教室 ...

  8. 关于maven:调整你的maven的jdk版本为 xxxx

    找到你的.m2文件 在里面添加一下信息 实例  将其更改成1.7 <profiles> <profile> <id>jdk-1.7</id> <! ...

  9. hybrid浅记

    目前首次接触hybrid项目,故根据翻阅了解后,浅记对它的认识. hybrid是携程推出的一个项目框架,其优点是:跨平台.开发效率高.开发成本相对较低,其不足是:体验不如Native hybrid设计 ...

  10. DHCP分配固定IP

    https://www.cnblogs.com/liu1026/p/9829337.html 按照上面的操作实验好后在DHCP服务端的配置文件中加入