为了防止用户未登录直接修改路径来访问页面,解决办法:

在main.js文件中加入以下代码:

  1. // 路由拦截
  2. router.beforeEach((to, from, next) => {
  3. if (to.meta.requireAuth) { //判断该路由是否需要登录
  4. if (store.state.Token) { //vuex获取当前token是否存在
  5. next();
  6. } else {
  7. Message({
  8. showClose: true,
  9. message: '请先登录!',
  10. type: "warning"
  11. });
  12. next({
  13. path: '/login',
  14. query: { redirect: to.fullPath } //将跳转的路由path作为参数,登录成功后跳转该路由
  15. })
  16. }
  17. } else { //无需登录直接跳转页面
  18. next();
  19. }
  20. })

在需要拦截的路由中添加:

26、router.beforeEach路由拦截的更多相关文章

  1. Vue+axios(interceptors) 实现http拦截 + router路由拦截 (双拦截)+ 请求自带loading效果

    axios interceptors 拦截器 //interceptors.js // vue axios配置 发起请求加载loading请求结束关闭loading // http request 请 ...

  2. router.beforeEach、路由元信息、导航守卫与函数式编程

    一.函数的识别: 1.router.beforeEach:主函数.高阶函数.入口函数: 2.匿名参量函数:处理跳转过程中的附加逻辑 (to, from, next) => { if (to.ma ...

  3. vue+axios 前端实现登录拦截(路由拦截、http拦截)

    一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录 ...

  4. 【转】vue+axios 前端实现登录拦截(路由拦截、http拦截)

    一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录 ...

  5. Vue+axios 实现http拦截及路由拦截

    现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的 ...

  6. vue+axios完美实现前端路由拦截

    一.路由拦截 1.首先在router的index.js里配置一个自定义字段requireAuth,用该字段来判断进入该路由是否需要登录.如果已经登陆则进入该路由,反之则进入登录页面. 如图是路由配置: ...

  7. vue 路由拦截、axios请求拦截

    路由拦截 项目中,有些页面需要登录后才能进入,例如,在某页面A,用户在操作前需要先进入登录页(此时需要将上一页的地址(/survey/start)作为query存入login页面的地址中,如: htt ...

  8. 「Vue」登陆-路由拦截器

    1.main.js设置拦截器 router.beforeEach(function (to,from,next) { if (to.meta.requireAuth) { if (store.stat ...

  9. vue-router做路由拦截时陷入死循环

    今天分享一下使用vue-router做路由拦截时遇到的坑. 需要提前了解的api 1:router.beforeEach( to , from ,next) ; to: Route: 即将要进入的目标 ...

随机推荐

  1. Oracle存储过程常用语法及其使用

    1.什么是存储过程 存储过程Procedure是一组为了完成特定功能的SQL语句集合,经编译后存储在数据库中,用户通过指定存储过程的名称并给出参数来执行.它可以接受参数.输出参数,并可以返回单个或多个 ...

  2. SpringBoot配置文件加载位置与优先级

    1. 项目内部配置文件 spring boot 启动会扫描以下位置的application.properties或者application.yml文件作为Spring boot的默认配置文件 –fil ...

  3. 【字符串】 Z-algorithm

    Z-algorithm Algorithm Task 给定一个文本串 \(S\) 和一个模式串 \(T\),求 \(T\) 对于 \(S\) 的每个后缀子串的公共前缀子串. Limitations 要 ...

  4. UID、PID、PPID是什么?

    UID是用户ID,PID是进程ID,PPID是父进程ID. UID UID 用户身份证明(User Identification)的缩写.UID用户在注册后,系统会自动的给你一个UID的数值.意思就是 ...

  5. Trie字典树(超详细!!!)

    介绍 字典树,也称Trie.字母树,指的是某个字符串集合对应的形如下图的有根树.树的每条边上对应有恰好一个字符,每个顶点代表从根到该节点的路径所对应的字符串(将所有经过的边上的字符按顺序连接起来).有 ...

  6. PatchMatchStereo可能会需要的Rectification

    在稠密三维重建中,rectification可以简化patch match的过程.在双目特征匹配等场景中其实也用得到,看了一下一篇论文叫< A Compact Algorithm for Rec ...

  7. 用ADB 抓取和存储APP日志方法

    前置条件:电脑已经安装好adb (一)  进入adb目录下连接手机,检测出手机 CD 到SDK的platform-tools (二)adb logcat-c  清除日志  (三)adb  logcat ...

  8. etcd备份与恢复

    目录 备份 恢复 备份 通常而言,etcd都是集群部署,其实并不需要额外备份,但实在是架不住猪队友误操作. 写一个简单的etcd备份脚本如下: #!/bin/bash set -e exec > ...

  9. cmdb知识总结

    cmdb面试 1.paramiko模块的作用与原理 2.cmdb是什么 3.为什么要开发CMDB? 4.你们公司有多少台服务器?物理机?虚拟机? 5.你的CMDB是如何实现的? 6.CMDB都用到了哪 ...

  10. 【转载】ZYNQ Cache问题的解决方法

    Zynq Cache问题的解决方法 - Kevin_HeYongyuan - 博客园https://www.cnblogs.com/kevin-heyongyuan/articles/7738552. ...