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. python 回溯法 子集树模板 系列 —— 8、图的遍历

    问题 一个图: A --> B A --> C B --> C B --> D B --> E C --> A C --> D D --> C E -- ...

  2. 基于Boost库的HTTP Post函数

    两个函数的区别: 提交表单数据和提交文本数据 表单数据: request_stream << "Content-Type: application/x-www-form-urle ...

  3. Linux 学习日记 2 (常用命令 + deb包的安装)

    常用命令:以下是一些比较常用的命令,主要是关于安装软件的一些命令 @_@ cd ~/下载(文件名)/ //进入这个文件夹 , ~指的是根目录 cd .. //返回上一级文件夹 sudo apt-get ...

  4. JAVAWEB 项目注册登录模块问题总结

    tomcat: 假如tomcat服务器启动出现错误,那就可能是servlet或代码的原因 tomcat服务器出现不能访问页面的情况,可以在eclipse tomcat服务器设置里设置为共享服务器模式 ...

  5. EF Core 新特性——Owned Entity Types

    Owned Entity Types 首先owned entity type是EF Core 2.0的新特性. 至于什么是owned entity types,可以先把他理解为EF Core官方支持的 ...

  6. python中列表的常用操作增删改查

    1. 列表的概念,列表是一种存储大量数据的存储模型. 2. 列表的特点,列表具有索引的概念,可以通过索引操作列表中的数据.列表中的数据可以进行添加.删除.修改.查询等操作. 3. 列表的基本语法 创建 ...

  7. 【Alpha】第十次Scrum meeting

    姓名 今日完成任务 所耗时间 刘乾 使用jinja2引擎成功做出第一个模板py文件和latex文件!这是零的突破!(途中遇到很多坑我也就不吐槽了,真是理想与现实差距满满啊) Issue链接:https ...

  8. [2017BUAA软工助教]剩余个人作业与deadline

    软件工程剩余作业与deadline 标签(空格分隔): 软件工程 一.个人阅读作业+总结 对软件工程的学习做一个总结. 阅读下列关于软件开发本质和开发方法的博客/文章,结合自己在个人项目/结对编程/团 ...

  9. 20135220谈愈敏Linux Book_5

    第五章 系统调用 内核提供了用户进程与内核进行交互的一组接口. 应用程序发出请求->内核负责满足 目的:保证系统稳定可靠 5.1 与内核通信 系统调用在用户空间进程和硬件设备之间添加了一个中间层 ...

  10. C++:派生类的构造函数和析构函数的调用顺序

    一.派生类 在C++编程中,我们在编写一个基类的派生类时,大致可以分为四步: • 吸收基类的成员:不论是数据成员还是函数成员,派生类吸收除基类的构造函数和析构函数之外的全部成员. • 改造基类函数:在 ...