vue路由实现登录拦截


Posted in Vue.js onMarch 24, 2021

一、概述

在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录,前端可以判断,后端也会进行判断的,我们前端最好也进行判断。

vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach,他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。

导航钩子有3个参数:

  1、to:即将要进入的目标路由对象;

  2、from:当前导航即将要离开的路由对象;

  3、next :调用该方法后,才能进入下一个钩子函数(afterEach)。

        next()//直接进to 所指路由
        next(false) //中断当前路由
        next('route') //跳转指定路由
        next('error') //跳转错误路由

二、路由导航守卫实现登录拦截

这里用一个空白的vue项目来演示一下,主要有2个页面,分别是首页和登录。

访问首页时,必须要登录,否则跳转到登录页面。

新建一个空白的vue项目,在src\components创建Login.vue

<template>
 <div>这是登录页面</div>
</template>
 
<script>
 export default {
  name: "Login"
 }
</script>
 
<style scoped>
 
</style>

修改src\router\index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'
 
 
Vue.use(Router)
 
const router = new Router({
 mode: 'history', //去掉url中的#
 routes: [
 {
  path: '/login',
  name: 'login',
  meta: {
  title: '登录',
  requiresAuth: false, // false表示不需要登录
  },
  component: Login
 },
 {
  path: '/',
  name: 'HelloWorld',
  meta: {
  title: '首页',
  requiresAuth: true, // true表示需要登录
  },
  component: HelloWorld
 },
 
 ]
})
 
// 路由拦截,判断是否需要登录
router.beforeEach((to, from, next) => {
 if (to.meta.title) {
 //判断是否有标题
 document.title = to.meta.title;
 }
 // console.log("title",document.title)
 // 通过requiresAuth判断当前路由导航是否需要登录
 if (to.matched.some(record => record.meta.requiresAuth)) {
 let token = localStorage.getItem('token')
 // console.log("token",token)
 // 若需要登录访问,检查是否为登录状态
 if (!token) {
  next({
  path: '/login',
  query: { redirect: to.fullPath }
  })
 } else {
  next()
 }
 } else {
 next() // 确保一定要调用 next()
 }
})
 
export default router;

说明:

在每一个路由中,加入了meta。其中requiresAuth字段,用来标识是否需要登录。

在router.beforeEach中,做了token判断,为空时,跳转到登录页面。

访问首页

http://localhost:8080

会跳转到

http://localhost:8080/login?redirect=%2F

效果如下:

vue路由实现登录拦截

打开F12,进入console,手动写入一个token

localStorage.setItem('token', '12345678910')

效果如下:

vue路由实现登录拦截

再次访问首页,就可以正常访问了。

vue路由实现登录拦截

打开Application,删除Local Storage里面的值,右键,点击Clear即可

vue路由实现登录拦截

刷新页面,就会跳转到登录页面。

怎么样,是不是很简单呢!

Vue.js 相关文章推荐
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
Vue Element plus使用方法梳理
Dec 24 Vue.js
vue项目实现分页效果
Mar 24 #Vue.js
vue实现倒计时功能
Mar 24 #Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 #Vue.js
使用Vue.js和MJML创建响应式电子邮件
vue+flask实现视频合成功能(拖拽上传)
Mar 04 #Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 #Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 #Vue.js
You might like
php 生成饼图 三维饼图
2009/09/28 PHP
PHP防盗链代码实例
2014/08/27 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
Python单链表简单实现代码
2016/04/27 Python
Python实现选择排序
2017/06/04 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
python selenium 获取接口数据的实现
2020/12/07 Python
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
中专生学习生活的自我评价分享
2013/10/27 职场文书
小学生读书感言
2014/02/12 职场文书
党课心得体会范文
2014/09/09 职场文书
毕业论文致谢词
2015/05/14 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python