「Vue」登陆-路由拦截器
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」登陆-路由拦截器的更多相关文章
- vue中怎样实现 路由拦截器
vue中怎样实现 路由拦截器(当用户没有登录的时候,跳转到登录页面,已经登录的时候,不能跳转到登录页,除非后台token失效) 在 我们需要实现这样 一个功能,登录拦截 其实就是 路由拦截,首先在定义 ...
- vue 路由拦截器和请求拦截器
路由拦截器 已路由为导向 router.beforeEach((to,from,next)=>{ if(to.path=='/login' || localStorage.getItem('to ...
- Android逆向之旅---静态方式分析破解视频编辑应用「Vue」水印问题
一.故事背景 现在很多人都喜欢玩文艺,特别是我身边的UI们,拍照一分钟修图半小时.就是为了能够在朋友圈显得逼格高,不过的确是挺好看的,修图的软件太多了就不多说了,而且一般都没有水印啥的.相比较短视频有 ...
- JAVAEE——SSH项目实战05:用户注册、登陆校验拦截器、员工拜访客户功能和MD5加密
作者: kent鹏 转载请注明出处: http://www.cnblogs.com/xieyupeng/p/7170519.html 一.用户注册 显示错误信息到页面上的另一种方法: public ...
- (vue.js)axios interceptors 拦截器中添加headers 属性
(vue.js)axios interceptors 拦截器中添加headers 属性:http://www.codes51.com/itwd/4282111.html 问题: (vue.js)axi ...
- 「Vue」起步 - vue-router路由与页面间导航
vue-router 我们知道路由定义了一系列访问的地址规则,路由引擎根据这些规则匹配找到对应的处理页面,然后将请求转发给页进行处理.可以说所有的后端开发都是这样做的,而前端路由是不存在"请 ...
- vue axios请求/响应拦截器
// main.js中配置 // 引入 axios import Axios from 'axios' // 这时候如果在其它的组件中,是无法使用 axios 命令的. // 但如果将 axios 改 ...
- vue使用jsx/axios拦截器设置
最害怕的就是做过的事情,转几天又忘记了:写过的代码,也模模糊糊不知道哪里去了,所以告诉自己最好把每天遇到的问题记录下来,好,开始. 新公司要搭个vue后台框架,所以用了简简单单的 vue+iview+ ...
- vue页面跳转拦截器
登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录页面.在路由管 ...
随机推荐
- [UOJ#461]新年的Dog划分[二分图染色、二分]
题意 给你一张无向连通图,你并不知道有哪些边,你首先要回答这张图是否是二分图,如果是,回答这张图黑白染色过后的任意一个点集.你需要在2000次询问内找到结果,每次你可以询问原图中一个边集删掉后是否还连 ...
- [CF1039E]Summer Oenothera Exhibition[根号分治+lct]
题意 给一个长度为 \(n\) 的序列, \(q\) 次询问,次给一个 \(k_i\) ,问最少将序列划分成多少次,满足每一段的极差不超过\(w−k_i\). \(1 \leq n, q \leq 1 ...
- JQuery快速入门-事件与效果
一.事件 事件绑定的方法有两种: 绑定到元素 查找元素后绑定事件 方法1:绑定到元素 <body> <p onclick='func1()'>点击我</p> < ...
- c语言数字图像处理(三):仿射变换
仿射变换及坐标变换公式 几何变换改进图像中像素间的空间关系.这些变换通常称为橡皮模变换,因为它们可看成是在一块橡皮模上印刷一幅图像,然后根据预定的一组规则拉伸该薄膜.在数字图像处理中,几何变换由两个基 ...
- Mistakes I Made(as a developer)...大龄程序员的忠告...(部分转...)
在2006年,我开始了编程工作.当意识到来到了十年这个重要的时间关口时,我觉得有必要回顾一下这十年间所犯下的错误,做一做经验总结,并且给正在这个职业上奋斗的人们提出我的一些忠告.开发行业变化得很快,我 ...
- 微软职位内部推荐-Senior BSP Engineer
微软近期Open的职位: The position of Sr. BSP engineer requires experience and good knowledge in mobile hardw ...
- android开发之使用SQLite数据库存储
http://blog.csdn.net/jason0539/article/details/16360835 SQLite 介绍 SQLite 一个非常流行的嵌入式数据库,它支持 SQL 语言,并且 ...
- Daily Scrumming* 2015.12.8(Day 1)
一.团队scrum meeting照片 二.今日总结 姓名 WorkItem ID 工作内容 签入链接以及备注说明 江昊 任务942 学习使用github,在github上建立组织并将所有队员纳入, ...
- linux 远程连接报错 10038或者10061 或者10060
1.检查linux的mysql是否开启 2.检查mysql的user表的host是否是% 3.检查my.cnf文件是否绑定本地 4.防火墙3306端口是否开启 假如以上都没问题,那最大的原因就是我折腾 ...
- What is the difference between WinRT, UWP and WPF?
在学习UWP的过程中确实有这个迷惑,在此分享一下. UWP (Universal Windows platform), Metro and WinRT are all result of Micros ...