「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,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录页面.在路由管 ...
随机推荐
- STM32---定时器的ETR功能
定时器的ETR功能 在使用定时器的时候,在引脚复用功能中看到了TIM2_CH1_ETR,这个ETR是什么意思呢? 答:TIM2_CH1_ETR表示两个功能选一个,分别是TIM2_CH1和TIM2_ET ...
- 【Qt】QOpenGLWidget展示蒙版效果
关键代码是派生QOpenGLWidget,覆写paintEvent函数 QPainter p; p.begin(this); p.drawImage(QPoint(, ), m_Img); QLine ...
- linux查找进程pid并杀掉
命令:ps aux | grep `pwd` | grep -v grep | awk '{print $2}' | xargs kill -9 详细解释[我的有道云笔记,不知道为什么没法直接复制到 ...
- Reflux系列01:异步操作经验小结
写在前面 在实际项目中,应用往往充斥着大量的异步操作,如ajax请求,定时器等.一旦应用涉及异步操作,代码便会变得复杂起来.在flux体系中,让人困惑的往往有几点: 异步操作应该在actions还是s ...
- 详细聊聊k8s deployment的滚动更新(二)
一.知识准备 ● 本文详细探索deployment在滚动更新时候的行为 ● 相关的参数介绍: livenessProbe:存活性探测.判断pod是否已经停止 readinessProbe:就绪 ...
- 了不起的Node.js--之三
开发工具: 我使用的开发工具是Mac版的WebStorm,这个工具支持Nodejs,只要按照如下步骤设置即可以支持 1.WebStorm的开发界面,这个开发工具还是非常好用的. 2.WebStorm的 ...
- mysql 查询所有子节点的相关数据
定义一个函数 ) CHARSET utf8 BEGIN ); ); SET sTemp = '$'; SET sTempChd =cast(rootId as CHAR); WHILE sTempCh ...
- Alpha Version Release Of Teamwork: Appendix 1 BUG BASH
在为期一周的发布周中,我们将app本身最后的细节完善,功能代码到位,UI不断改进和优化,团队在开始准备发布之前,对整个APP进行了一次BUG检查,每个人都部署了app在自己的android设备上进行测 ...
- 【Alpha】功能规格说明书
更新说明:从用户需求分析中剥离有关用户场景分析部分,加入功能规格说明书. Github地址:https://github.com/buaase/Phylab-Web/blob/master/docs/ ...
- “Linux内核分析”实验一报告
张文俊 + 原创作品转载请注明出处 + <Linux 内核分析> MOOC 课程 实验要求: 1.总结部分要求阐明自己对“计算机是如何工作的”理解: 2.博客中需要使用实验截图: 实验内容 ...