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的mixin策略
Nov 19 Vue.js
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vue3.0实现插件封装
Dec 14 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
vue组件vue-esign实现电子签名
Apr 21 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
第1次亲密接触PHP5(1)
2006/10/09 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
PHP chop()函数讲解
2019/02/11 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
使javascript也能包含文件
2006/10/26 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
vue生命周期实例小结
2018/08/15 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
应届生服装设计自我评价
2013/09/20 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
合伙协议书范本
2014/04/21 职场文书
考博专家推荐信
2014/05/10 职场文书
学雷锋的心得体会
2014/09/04 职场文书
Python 统计序列中元素的出现频度
2022/04/26 Python
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers