前端开发：路由守卫/路由拦截的使用

置顶 已于 2022-10-12 00:11:57 修改
阅读量2.3k 收藏 4
点赞数 4
分类专栏： web前端知识汇总 文章标签： 前端 javascript vue.js
于 2022-09-30 18:51:19 首次发布
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/CC1991_/article/details/127127922
版权
web前端知识汇总 专栏收录该内容
36 篇文章 1 订阅 ¥99.90 ¥299.90
订阅专栏
本文详细介绍了Vue.js的路由守卫，包括全局路由守卫、单个路由独享守卫和组件内部路由守卫。通过具体示例展示了如何在不同阶段拦截和控制路由跳转，特别强调了在登录验证场景中的应用。了解这些知识点能帮助开发者更好地掌握路由管理，提升开发效率。
摘要由CSDN通过智能技术生成

前言

在前端开发过程中，Vue的生命周期对于开发者来说并不陌生，而且也是经常使用的，不管是在实际开发过程中还是在前端求职面试中都是必备知识点，Vue常用的钩子函数也是非常重要的，重要性不必多说。本文就来分享一下关于Vue的路由守卫相关的使用，尤其是在实际开发中比较常用且重要的知识点，总结分享一下，方便后期查阅使用。

路由守卫的定义

在Vue中，官方对于路由守卫的解释就是vue-router提供的路由守卫是用来跳过或者取消的方式守卫路由/导航。其实，路由守卫就是路由在跳转过程中相关的钩子函数，可以根据实际业务场景在不同的钩子函数中添加逻辑处理。

路由守卫分类

路由守卫的分类有三种：全局路由守卫、单个路由独享守卫、组件内部路由守卫。其中，这三种路由守卫的钩子函数都有3个参数：

  • to :  进入的目标路由；
  • from : 离开的路由；
  • next   :  控制路由，在跳转时进行的操作，一定会执行的，即下一步。

其中，next有四种操作行为：

  • next() :  所有钩子函数都执行结束后，进入到下一个路由中；
  • next(false): 中断路由进入下一个路由；
    • <
了解本专栏 订阅专栏 解锁全文
三掌柜666
关注
专栏目录
订阅专栏
路由导航守卫/路由拦截/导航守卫
iseyre的博客
12-29 888
目录 导航守卫： 全局守卫 组件守卫： 独享守卫 导航守卫： 又称：路由导航守卫、路由拦截都是一样的 分为全局守卫、组件守卫、独享守卫 全局守卫 写在路由页面，写在const router同级之下 const router = new VueRouter({ routes }) //全局守卫写在这里 全局守卫又分为：前置守卫：router.beforeEach 和后置钩子：router.afterEach 前置守卫常用于登录验证：如下 //全局守卫 rout.
前端鉴权、路由守卫
m0_58847961的博客
07-01 775
①查询参数？后面携带的②路径参数：后面携带的也就是我们常说的query的③请求头携带④请求体携带 二、状态码状态码400可能是四种参数错误或者是输入的参数错误少传或者没传401一般会是后端校验token失败403无权限404资源不存在，检查自己接口是否错误了503超载三、保护前端页面（避免用或通过拼接url直接跳转）1.点击enter直接登陆@keyup.enter.native2.如果一个没填不能登陆可以通computer中的boolean来决定可以在前后的route里的meta设置一些不同管理员能用
vue + vue-router +axios 前端实现登录拦截（路由和http 拦截）
yangxiaodong88的博客
05-06 1572
一 路由拦截 https://github.com/yangxiaodong1/vue-interceptors 登录拦截逻辑 第一步：路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由， 否则就进入登录页面。 const routes = [ { path: '/...
路由守卫详解
最新发布
weixin_30402231的博客
08-13 200
什么是路由守卫？在 Vue.js 中，路由守卫是用来控制页面导航行为的函数。当我们在应用中切换路由时，路由守卫允许我们在路由改变之前或之后执行一些特定的逻辑。比如，我们可以用路由守卫来检查用户是否已登录，是否有权限访问某个页面，或者在离开当前页面之前提示用户保存未完成的工作等等。这相当于vue中的生命周期钩子函数一样，在路...
25.blog前端-路由守卫
weixin_45974277的博客
02-12 847
全局前置路由守卫。beforeEach()在初始化和每一次路由切换之前调用函数,控制用户信息的获取 router.beforeEach((to, from, next) => { if(store.state.token) { //路径如果是请求的login登录页面，但是又存在token，并且有账户信息 //证明用户登陆过，不能重复登录，则跳转到首页 if(to.path ==="/login" && store.s.
前端之vue路由守卫(权限)、路由模式
weixin_46372074的博客
05-23 1728
路由守卫前置路由守卫 -- 设置权限meta为路由添加检验权限后置路由守卫独享路由守卫 -- beforeEnter组件内 路由守卫总结 前置路由守卫 – 设置权限 切换前执行,next()执行切换 import VueRouter from 'vue-router'; const router = new VueRouter({ routes: [ { path: '/about', component: MyAbout },... ] }); // 全
vue路由守卫,路由拦截，导航守卫
m0_60531448的博客
04-01 3327
路由守卫就是当⻚⾯跳转的时候会触发的钩⼦函数, vue⼀共给我们提供了三种路由守卫 全局路由守卫 前置守卫： router.beforeEach((to,from,next) => {}) to-到哪里去 from --从哪里来 next–重定向 //路由拦截 我们经常使⽤路由守卫实现⻚⾯的鉴权 router.beforeEach((to,from,next) => { const token = store.state.koten; if(!token && to
路由拦截和路由守卫
肥晨开发的学习之路
01-08 504
在vue中，为确保用户登录，使用路由拦截器或者路由守卫判断登录状态，并判断和处理情况。 路由守卫是什么？ 官方文档的解释是： 可以用router.beforeEach注册一个路由守卫 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ...}) 注:这是一个全...
vue面试题-路由守卫 / 导航守卫
02-03
在面试中，面试官可能会提出关于“路由守卫”或“导航守卫”的问题，这是Vue Router的一个重要特性，用来控制用户的导航行为，确保只有授权的用户才能访问特定的页面。 1. **路由守卫 / 导航守卫**： - 路由守卫...
vue的路由导航守卫/拦截
ruotong0418的博客
12-29 835
路由守卫分为哪几种？ 全局守卫，组件级守卫，单个独享守卫 全局守卫 是指路由实例上直接操作的钩子函数，特点是所有路由配置的组件都会触发，直白点就是触发路由就会触发这些钩子函数 全局守卫又分为全局前置守卫（router.beforeEach）和全局后置钩子（router.afterEach）,还有一个router.beforeReslove(2.5.0+) — 在beforeRouteEnter调用之后调用 全局前置守卫（router.beforeEach） 在router下面的jindex.js下面写：
vue路由导航守卫和请求拦截以及基于node的token认证的方法
10-17
在Vue路由守卫中，我们可以检测本地存储的用户信息来决定是否重定向。 总结来说，结合Vue Router的导航守卫、请求拦截器以及Node.js的JWT认证，我们可以构建出一套完整的用户认证和权限管理系统，确保只有合法用户...
辉太郎看前端(vue中的路由守卫)
辉太郎的博客
01-13 306
前言 在路由的跳转的时候，有一些特定的钩子函数会被执行在这些函数中我们可以通过自己的逻辑来改变路由跳转路径。 钩子的参数是一个回调函数，回调函数有三个参数 分别为 to from next to 对象 去哪儿 from 对象 从哪来 next 函数 next() == next(true) 继续执行 不写next==next(false)终止执行 next(路由)跳转到某个路由 全局路由守卫 定义在全局，也就是main.js中，语法为：router.beforeEach((to,from,nex
Vue-Router导航守卫
叨叨不休的日字
07-24 574
有的时候，我们需要通过路由来进行一些操作，比如最常见的登录权限验证，当用户满足条件时，才让其进入导航，否则就取消跳转，并跳到登录页面让其登录。 为此我们有很多种方法可以植入路由的导航过程：全局的, 单个路由独享的, 或者组件级的,推荐优先阅读路由文档 全局守卫 vue-router全局有三个守卫： router.beforeEach 全局前置守卫 进入路由之前 router.before...
vue路由守卫
weixin_44862325的博客
03-29 616
全局路由守卫 前置守卫 在进入路由之前执行 beforeEach(to,from,next){ //to 即将要进入的目标路由对象 //from 导航要离开的路由对象 //next() //这里要使用next放行 否则无法创建实例 } 后置守卫 在离开路由的时候执行 afterEach(to.from){ // } 局部路由守卫 是在路由配置页面单独给路由配置的守卫...
前端路由拦截
heal_l的博客
11-18 756
路由拦截器 路由全局守卫（在渲染之前执行）， router.beforeEach((to,from,next)=>{ let token = localStorage.getItem("token"); if(token){ // next放行 next(); }else{ if(to.fullPath === '/login'){ next(); }else{ next("/login"); } } }) ...
前端路由守卫 vue路由守卫 vue角色权限 url跳转配置
qq_43017024的博客
07-28 641
适合url需要做判断的很多且是多人开发。适合项目url不多或角色权限不多。
前置路由守卫
weixin_45630548的博客
11-11 2435
路由守卫，他是一个方法。拦截路由。 路由守卫写在路由暴露之前,在这个方法中会传递一个回调函数，回调函数中传递3个参数 router.beforeEach(()=>{}) 也叫做前置路由守卫。 里面有3个参数： to 到哪里去 from 从哪里来 next 放行函数 作用 防止别人猜到网址的哈希值后直接跳过登录就可以查看数据 router.beforeEach((to, from, next) => { let tk = local.get('tk')...
Vue 路由 导航守卫(全局守卫、组件内守卫、路由独享守卫)
ai_feng123的博客
11-25 2584
一.全局守卫 1. router.beforeEach((to,from,next)=>{}) 2. 回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。 3. 如下例：main.js中设置全局守卫 在main.js中，有一个路由实例化对象router。在main.js中设置守卫已是全局守卫。如下，判断to.path当前...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三掌柜666

如果对您有所帮助，请支持一下呗

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值