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: 即将要进入的目标 ...
随机推荐
- Oracle存储过程常用语法及其使用
1.什么是存储过程 存储过程Procedure是一组为了完成特定功能的SQL语句集合,经编译后存储在数据库中,用户通过指定存储过程的名称并给出参数来执行.它可以接受参数.输出参数,并可以返回单个或多个 ...
- SpringBoot配置文件加载位置与优先级
1. 项目内部配置文件 spring boot 启动会扫描以下位置的application.properties或者application.yml文件作为Spring boot的默认配置文件 –fil ...
- 【字符串】 Z-algorithm
Z-algorithm Algorithm Task 给定一个文本串 \(S\) 和一个模式串 \(T\),求 \(T\) 对于 \(S\) 的每个后缀子串的公共前缀子串. Limitations 要 ...
- UID、PID、PPID是什么?
UID是用户ID,PID是进程ID,PPID是父进程ID. UID UID 用户身份证明(User Identification)的缩写.UID用户在注册后,系统会自动的给你一个UID的数值.意思就是 ...
- Trie字典树(超详细!!!)
介绍 字典树,也称Trie.字母树,指的是某个字符串集合对应的形如下图的有根树.树的每条边上对应有恰好一个字符,每个顶点代表从根到该节点的路径所对应的字符串(将所有经过的边上的字符按顺序连接起来).有 ...
- PatchMatchStereo可能会需要的Rectification
在稠密三维重建中,rectification可以简化patch match的过程.在双目特征匹配等场景中其实也用得到,看了一下一篇论文叫< A Compact Algorithm for Rec ...
- 用ADB 抓取和存储APP日志方法
前置条件:电脑已经安装好adb (一) 进入adb目录下连接手机,检测出手机 CD 到SDK的platform-tools (二)adb logcat-c 清除日志 (三)adb logcat ...
- etcd备份与恢复
目录 备份 恢复 备份 通常而言,etcd都是集群部署,其实并不需要额外备份,但实在是架不住猪队友误操作. 写一个简单的etcd备份脚本如下: #!/bin/bash set -e exec > ...
- cmdb知识总结
cmdb面试 1.paramiko模块的作用与原理 2.cmdb是什么 3.为什么要开发CMDB? 4.你们公司有多少台服务器?物理机?虚拟机? 5.你的CMDB是如何实现的? 6.CMDB都用到了哪 ...
- 【转载】ZYNQ Cache问题的解决方法
Zynq Cache问题的解决方法 - Kevin_HeYongyuan - 博客园https://www.cnblogs.com/kevin-heyongyuan/articles/7738552. ...