Vue-router路由判断页面未登录跳转到登录页面

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireAuth)){  // 判断该路由是否需要登录权限
    if (token) {  // 判断当前的token是否存在
      next();
    }
    else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}  // 将跳转的路由path作为参数,登录成功后跳转到该路由
      })
    }
  }
  else {
    next();
  }
});

在这之前是给路由加一个meta属性:

{
    path: '/index',
    meta: {
      title: '',
      requireAuth: true,  // 添加该字段,表示进入这个路由是需要登录的
    },
}

注意:但是事实是登录的时候大多数时候并不进行跳转,所以这里需要在login跳转的路径中再加一段:

if(this.$route.query.redirect){
//     let redirect = decodeURIComponent(this.$route.query.redirect);
       let redirect = this.$route.query.redirect;
       this.$router.push(redirect);
}else{
       this.$router.push('/');
 }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏以南小隐-数通那些事儿

Nginx1.8.1开启防盗链

12920
来自专栏Linux驱动

第3阶段——内核启动分析之make uImage编译内核(3)

目标: 通过分析makefile,明白make uImage如何编译内核 把整个内核的makefile分成三类(makefile资料文档在linux-2.6.2...

219100
来自专栏丑胖侠

Zookeeper开源客户端Curator之Master/Leader选举

在实际生产中,特别是分布式系统中,我们经常遇到这样的场景:一个复杂的任务,近需要从分布式机器中选出一台机器来执行。诸如此类的问题,我们统称为“Master选举”...

439100
来自专栏JadePeng的技术博客

axios介绍与使用说明 axios中文文档

本周在做一个使用vuejs的前端项目,访问后端服务使用axios库,这里对照官方文档,简单记录下,也方便大家参考。 Axios 是一个基于 Promise 的 ...

2.8K90
来自专栏漏斗社区

工具| 手把手教你制作信息收集器之端口扫描

本期任务:使用python脚本实现端口扫描。 准备工具:选项分析器:optparse;网络库:socket 问题引入 1. 端口扫描器扫描效果如何? ...

33660
来自专栏Linux驱动

第3阶段——内核启动分析之make uImage编译内核(3)

目标: 通过分析makefile,明白make uImage如何编译内核 把整个内核的makefile分成三类(makefile资料文档在linux-2.6.2...

40860
来自专栏Linux驱动

QT-第一个程序 Hello QT , 以及QT creator介绍

第一个程序 - Hello QT 首先写main.cpp: #include <QApplication> #include <QMainWindow> #in...

40870
来自专栏快乐八哥

Angular Service入门

1.Angular内置service Angular为了方便开发者开发,本身提供了非常多的内置服务。可以通过https://docs.angularjs.org...

233100
来自专栏佳爷的后花媛

php基础(一)

static 是静态变量,在局部函数中存在且只初始化一次,使用过后再次使用会使用上次执行的结果; 作为计数,程序内部缓存,单例模式中都有用到。

27220
来自专栏Google Dart

微信小程序之支付详解(填坑) 原

首先,你采用什么语言选择对应的sdk,记住:微信sdk默认签名是HMACSHA256,因为小程序只支持MD5,故你这里即使获取了prepay_id,在小程序发起...

13330

扫码关注云+社区

领取腾讯云代金券