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在图片上传的时候压缩图片
Nov 18 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
Vue深入理解插槽slot的使用
Aug 05 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的输入输出流
2007/02/14 PHP
PHP 简单日历实现代码
2009/10/28 PHP
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
PHP实现百度人脸识别
2019/05/06 PHP
基于jQuery的图片剪切插件
2011/08/03 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
python logging模块的使用总结
2019/07/09 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
通过实例解析Python调用json模块
2019/12/11 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
怎样自定义一个异常类
2016/09/27 面试题
电大自我鉴定范文
2013/10/01 职场文书
劳动之星获奖感言
2014/02/01 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
博士给导师的自荐信
2015/03/06 职场文书
酒店厨房管理制度
2015/08/06 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
Flask搭建一个API服务器的步骤
2021/05/28 Python
Mysql文件存储图文详解
2021/06/01 MySQL
Feign调用传输文件异常的解决
2021/06/24 Java/Android