import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import home from "@/pages/home"
import mine from "@/pages/mine"
import login from '@/pages/login'
import register from '@/pages/register'

const router = new Router({
mode: 'history',
routes: [{
path: '/',
name: 'home',
component: home,
meta:{
homePages:true
}
},
{
path:'/home',
component:home,
meta:{
homePages:true
}
},
{
path:"/mine",
name:"mime",
component:mine,
meta:{
requiresAuth:false
}
},
{
path: '/login',
name: 'login',
component: login,
meta:{
requiresAuth:true
}
},
{
path: '/register',
name: 'register',
component: register,
meta:{
requiresAuth:true
}
},
]
});

router.beforeEach((to, from ,next) => {
const token = localStorage.getItem("token")
if(to.matched.some(record => record.meta.requireAuth || record.meta.homePages)){
//路由元信息requireAuth:true,或者homePages:true,则不做登录校验
next()
}else{
if(token){//判断用户是否登录
if(Object.keys(from.query).length === 0){//判断路由来源是否有query,处理不是目的跳转的情况
next()
}else{
let redirect = from.query.redirect//如果来源路由有query
if(to.path === redirect){//这行是解决next无限循环的问题
next()
}else{
next({path:redirect})//跳转到目的路由
}
}
}else{
if(to.path==="/login"){
next()
}else{
next({
path:"/login",
query: {redirect: to.fullPath}//将目的路由地址存入login的query中
})
}
}
}
return
})
export default router;

vue授权页面登陆之后返回之前的页面的更多相关文章

  1. vue滚动行为控制——页面跳转返回上一个页面保留滚动位置

    需求分析: 一般这个功能在后台管理系统用的比较多,因为后台页面都是在当前页面打开,对于某些列表筛选页,如果列表数据比较多,页面就会滚动.当页面发生滚动,对列表数据进行查看或者编辑的时候,跳转到下一级页 ...

  2. Identity Server 4登陆后返回登录前页面

  3. 【flask】登陆后返回之前重定向跳转的页面

    登陆后返回之前重定向跳转的页面 一.前言 实现强制跳转到登陆页面,登陆后返回之前的页面的功能.网上跳登陆页面的很多:返回之前页面功能没多少.这里我只是用了自己的方法,有缺点和其他方法也请指点!(´ε` ...

  4. vue的登陆验证及返回登录前页面实现

    一.路由配置部分如下所示, 导出路由示例 let router = new VueRouter({ routes: [ // 登陆 { name: 'login', path: '/login', c ...

  5. vue keep-alive 实现详情返回列表保留页面数据

    实现功能 详情页返回列表页,列表页保留上次浏览位置 其它页面进入到列表表,列表页刷新 当详情页有数据改变时,列表页也要更新该条数据 实现思路 用keep-alive保留列表页面数据 activated ...

  6. axios interceptors 拦截 , 页面跳转, token 验证 Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示)

    Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示) :https://blog.csdn.net/H1069495874/article/details/80057107 ...

  7. vue中keepAlive的用法[返回页面不刷新]

    本文转载于時間蒼白了誓言_49b9 使用vue单页开发项目时遇到一个问题:在列表页进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用解决这个问题,下面是我的使用 ...

  8. 微信小程序中h5跳转到登录页面,登陆成功返回携带参数,h5刷新

    公司的一个小程序,要做一个活动,需要判断登录状态. 思路:h5跳转到登录页面,登陆成功携带token自动返回. 本来以为是个非常简单的功能,没想到..... 发帖记录一下 1.登录页面 用getCur ...

  9. tornado web高级开发项目之抽屉官网的页面登陆验证、form验证、点赞、评论、文章分页处理、发送邮箱验证码、登陆验证码、注册、发布文章、上传图片

    本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tornado的后端和ajax的 ...

随机推荐

  1. 使用navicat将mysql转换成sqlserver

    使用navicat将mysql转换成sqlserver 1. 打开navicat,连接所需要装换的mysql数据库. 2. 选择所需要转换的数据源,点击右键选择数据传输.如图: 3. 打开数据传输面板 ...

  2. AndroidManifest.xml警告

    新建一个android项目后,AndroidManifest.xml有一个黄色警告 作为一个新手,不知道这个警告来自哪里,点击界面下方的不同标签,才知道来自图中的位置 第8行中,application ...

  3. Android 线程+Handler的使用

    1.介绍 2.线程的使用 (1)启动 (2)执行 3.xml布局 <?xml version="1.0" encoding="utf-8"?> &l ...

  4. leetcode 88 Merge Sorted Array 归并排序

    归并排序:先将数组一分为二,将左边部分排序(同样将其一分为二),再将右边部分排序,最后逐层归并.(分治策略)(稳定排序). 算法稳定性 -- 假设在数列中存在a[i]=a[j],若在排序之前,a[i] ...

  5. FFT 深夜摸鱼小笔记

    本次笔记学习自算法导论 FFT核心:系数表示→(单位复数根)点值表示→(插值)系数表示 关于单位复数根 n次单位复数根\(ω\)为满足\(ω^n=1\)的复数 n次单位复数根恰好有n个,表示为\(ω_ ...

  6. 2019.3.28 JDBC相关

    JDBC(Java Data Base Connectivity) JDBC是一组用Java编写的类和接口 使用JDBC的好处: 1.Java的开发人员完全不需要关心数据库的连接方式和实现手段 2.提 ...

  7. PIE SDK栅格数据唯一值渲染

    1. 功能简介 栅格数据唯一值渲染,是以像元为单位,不同的像元值设置不同的颜色,从而达到唯一值显示的效果. 2. 功能实现说明 2.1. 实现思路及原理说明 第一步 实例化唯一值渲染对象 第二步 初始 ...

  8. vm12下Centos6安装mysql5.7

    一.下载mysql的rpm tar文件 文件名称:mysql-5.7.18-1.el6.x86_64.rpm-bundle.tar官方地址:https://dev.mysql.com/get/Down ...

  9. 一步步带你做vue后台管理框架

    1.登录 (1).  一步步带你做vue后台管理框架(三)——登录功能 2.权限控制 (1)  基于Vue2.0实现后台系统权限控制 (2) 手摸手,带你用vue撸后台 系列二(登录权限篇)

  10. oracle12C--DG FAR SYNC 部署(前提为搭建好12C的DG)

    <<往期12CDG搭建>> 一,理解同步异步模式 01, 使用LGWR 进程的SYNC 方式 1)Primary Database 产生的Redo 日志要同时写到日志文件和网络 ...