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: 即将要进入的目标 ...
随机推荐
- 搭建自己的docker镜像
手动构建 1.关键字查找镜像 sudo docker search centos 2.下载基本镜像 sudo docker pull centos 3.启动容器 sudo docker run -d ...
- Browse Princeton's Series (by Date) in Princeton Economic History of the Western World
Browse Princeton's Series (by Date) in Princeton Economic History of the Western World Joel Mokyr, S ...
- org.apache.hadoop.util.Shell demo/例子
package cn.shell; import java.io.IOException; import org.apache.hadoop.util.Shell; public class Shel ...
- db服务器参数优化
1.swap分区 swap作用是在系统内存不够的情况下,当做临时的内存使用. swap是在硬盘上,性能肯定没有再内存好,当系统内存使用超过40%的时候, swap会可能被使用,而系统一旦使用swap会 ...
- valgrind memcheck使用方法及效果(转)
https://windmissing.github.io/linux/2016-02/valgrind-memcheck.html 一.valgrind 1. Valgrind是什么 Valgrin ...
- Flask项目之login提交
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2019/11/2 20:53 # @Author : zoulixiang # @Si ...
- 别再说你不会 ElasticSearch 调优了,都给你整理好了
来源:http://tinyurl.com/y4gnzbje 第一部分:调优索引速度 第二部分-调优搜索速度 第三部分:通用的一些建议 英文原文:https://www.elastic.co/guid ...
- 依赖注入(DI)与控制反转(IOC)基础知识
依赖注入(DI)与控制反转(IOC)基础知识 一.什么是依赖注入? 依赖注入英文是Dependcy Injection简写DI,依赖注入会将所依赖的对象自动交由目标对象使用,而不是让对象自己去获取. ...
- 《Linux就该这么学》培训笔记_ch06_存储结构与磁盘划分
<Linux就该这么学>培训笔记_ch06_存储结构与磁盘划分 文章最后会post上书本的笔记照片. 文章主要内容: Linux系统的文件存储结构(FHS标准) 物理设备命名规则(udev ...
- cad.net 2008使用WPF(摘录山人)
由于WPF的优点多多,而且在大量的winform的操作下感觉到数据操作的麻烦....推荐大家看杨中科WPF数据绑定教程 https://www.bilibili.com/video/av3388348 ...