26、router.beforeEach路由拦截
为了防止用户未登录直接修改路径来访问页面,解决办法:
在main.js文件中加入以下代码:
// 路由拦截
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { //判断该路由是否需要登录
if (store.state.Token) { //vuex获取当前token是否存在
next();
} else {
Message({
showClose: true,
message: '请先登录!',
type: "warning"
});
next({
path: '/login',
query: { redirect: to.fullPath } //将跳转的路由path作为参数,登录成功后跳转该路由
})
}
} else { //无需登录直接跳转页面
next();
}
})
在需要拦截的路由中添加:

26、router.beforeEach路由拦截的更多相关文章
- Vue+axios(interceptors) 实现http拦截 + router路由拦截 (双拦截)+ 请求自带loading效果
axios interceptors 拦截器 //interceptors.js // vue axios配置 发起请求加载loading请求结束关闭loading // http request 请 ...
- router.beforeEach、路由元信息、导航守卫与函数式编程
一.函数的识别: 1.router.beforeEach:主函数.高阶函数.入口函数: 2.匿名参量函数:处理跳转过程中的附加逻辑 (to, from, next) => { if (to.ma ...
- vue+axios 前端实现登录拦截(路由拦截、http拦截)
一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录 ...
- 【转】vue+axios 前端实现登录拦截(路由拦截、http拦截)
一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录 ...
- Vue+axios 实现http拦截及路由拦截
现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的 ...
- vue+axios完美实现前端路由拦截
一.路由拦截 1.首先在router的index.js里配置一个自定义字段requireAuth,用该字段来判断进入该路由是否需要登录.如果已经登陆则进入该路由,反之则进入登录页面. 如图是路由配置: ...
- vue 路由拦截、axios请求拦截
路由拦截 项目中,有些页面需要登录后才能进入,例如,在某页面A,用户在操作前需要先进入登录页(此时需要将上一页的地址(/survey/start)作为query存入login页面的地址中,如: htt ...
- 「Vue」登陆-路由拦截器
1.main.js设置拦截器 router.beforeEach(function (to,from,next) { if (to.meta.requireAuth) { if (store.stat ...
- vue-router做路由拦截时陷入死循环
今天分享一下使用vue-router做路由拦截时遇到的坑. 需要提前了解的api 1:router.beforeEach( to , from ,next) ; to: Route: 即将要进入的目标 ...
随机推荐
- 水晶报表 VS2010 应用
VS.NET2010水晶报表安装部署[VS2010] 欢迎C#高手加盟QQ群:9340166 水晶报表VS2010版IDE安装标准版SAP Crystal Reports, version for ...
- 【MyEclipse】安装svn插件
svn插件包下载:http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240 重启myeclipse 看import就 ...
- SDOI2010选做
Round1 D1T1外星千足虫 \(BSOJ2793\)--高斯消元解异或方程组 简述 有\(n\)个数\(\{a_i\}\) 给出\(m\)个信息,每个信息给出\(\displaystyle{(\ ...
- 直接插入排序与缩小增量插入排序(希尔排序ShellSort)
直接插入排序 要理解shell排序,首先要把直接插入排序的基础打扎实. 学习资料:白话经典算法系列之二 直接插入排序的三种实现.直接插入排序 根据我的思路,直接插入排序设置3重循环. 循环1:对 i= ...
- T2:中间值(median)———2019.10.15
代码: #include <bits/stdc++.h> int ri() { , f = ; ; ) + (x << ) - ' + c; return x * f; } ; ...
- CF1174E Ehab and the Expected GCD Problem(DP,数论)
题目大意:对于一个序列,定义它的价值是它的所有前缀的 $\gcd$ 中互不相同的数的个数.给定整数 $n$,问在 $1$ 到 $n$ 的排列中,有多少个排列的价值达到最大值.答案对 $10^9+7$ ...
- mongodb连接认证失败
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_29143909/arti ...
- 关于Echarts柱状图实现的细节
echarts柱状图显示数值[1] echarts2: itemStyle : { normal: {label : {show: true, position: 'top'}}}, echarts ...
- go 优秀文档
go语言资料汇总 : https://blog.zhnytech.com/articles/2016/07/15/Golang%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99% ...
- 关于MySQL 通用查询日志和慢查询日志分析(转)
MySQL中的日志包括:错误日志.二进制日志.通用查询日志.慢查询日志等等.这里主要介绍下比较常用的两个功能:通用查询日志和慢查询日志. 1)通用查询日志:记录建立的客户端连接和执行的语句. 2)慢查 ...