vue的路由守卫？

已于 2022-10-18 21:28:55 修改
阅读量528 收藏
点赞数 1
文章标签： vue.js 前端 javascript 前端框架 vscode
于 2022-10-18 20:36:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_66552805/article/details/127396192
版权
本文介绍了Vue路由守卫的概念，包括全局、组件和独享三种类型的守卫，以及它们的执行顺序。重点阐述了beforeEach和beforeResolve的区别，并展示了如何在实际开发中使用路由守卫进行权限验证，确保只有登录用户才能访问特定页面。同时，文章还讨论了导航守卫的执行流程和使用场景。
摘要由CSDN通过智能技术生成

1.1 什么是路由

vue路由守卫就是当我们进行页面跳转的时候会触发的钩子函数,vue一共有三种路由守卫

第一种是全局路由守卫 beforeEach路由进入之前 beforeResolve 路由解析之前 afterEach 路由离开之前

第二种是组件集守卫 beforeRouteEnter路由进入之前 beforeRouteUpdate路由更新之前 beforeRouteLeave路由离开之前

第三种独享守卫 beforeEnter路由进入之前 这几个钩子函数里面都有一个回调函数,分别是to,from,next to代表到哪儿去 from代表从哪儿来 next代表执行下一步

1.2 导航守卫的使用场景

再写代码的过程中我一般用导航守卫进行页面的鉴权处理,再用户登录成功的时候,我们会吧token和用户信息存到vuex或者本地存储中, 代表了用户的登录状态,在访问某个页面的时候判断是否存有token,就能正常访问这个页面,如果没有token,那么就用next跳转到登录页面

1.3 导航守卫的执行顺序

全局前置 单个路由规则的 组件前置守卫 全局解析守卫 后置守卫

1.4 beforeEach和beforeResolve的区别

这两个都是全局守卫 都是在路由跳转之前就会执行的守卫 beforeEach比beforeResolve执行的时间要更早

某小雨
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vue 栏目权限管理，第一次跳转路由守卫拿不到值，需要手动刷新一下才能拿到值才有栏目的问题
qq_44121273的博客
10-24 1757
前端小白，今天弄一个vue的权限管理，期间，路由守卫中拿不到方法调用的数据，原因是我的login方法中 用的context.dispath调用另外两个方法 小白我的解决方法 注释掉context.dispatch调用，在此处用 await 直接请求接口 后面这些是我的解决思路，大忙人可以忽略了 这里调用login方法实现登录 按道理前面已经设置了 localStore 和 vuex了 路由中获取代码两种都获取不到我要的角色信息 也不清楚是为什么，查了一下async 和await，后面我用console.
Vue路由守卫之路由独享守卫
12-13
路由独立守卫，顾名思义就是这个路由自己的守卫任务，就如同咱们LOL，我们守卫的就是独立一条路，保证我们这条路不要被敌人攻克(当然我们也得打团配合) 在官方定义是这样说的：你可以在路由配置上直接定义 ...
Vue3路由守卫
leveretz的博客
02-07 436
Vue3路由守卫
Vue 在进入某个路由之前刷新页面
forteenBrother的博客
03-23 900
暴力解决一个前端问题 在进入页面之前，先判断本地存储是不是有标记，如果没有标记的话，就刷新，然后打上标记存在本地，在离开页面的时候，移除标记，并且在每次打开项目的时候，移除本标记 beforeRouteEnter(to, from, next) { next(vm => { let hasLoaded = localStorage.getItem("hasLoaded"); if (!hasLoaded &&
vue路由
m0_67316947的博客
08-07 604
进入前：beforeRouterEnter（to，from，next）next（“/login”）跳转到登录。next（true）进入to页面。next（false）不跳转。from 从哪个页面进入。next（）进入to页面。离开前 ：beforeRouterLeave。更新前：beforeRouterUpdate。...
vue路由守卫（没有登录就不能访问其他界面）
bzj66的博客
04-05 4259
效果： 1、在登录按钮中存入一个token window.sessionStorage.setItem('token', res.data.token) 2、在router中加入以下代码： router.beforeEach((to, from, next) => { // 1.如果访问的是登录页面（无需权限），直接放行 if (to.path === '/login' || to.path === '/register') return next() // 2..
vue-router
hzh2031015的博客
05-23 129
router路由原理 路由就是用来解析URL以及调用对应的控制器，并返回从视图对象中提取好的网页代码给web服务器,最终返回给客户端。 vue-router的两种模式 hash模式：在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取； history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（）， replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
vue路由守卫及路由守卫无限循环问题详析
10-16
Vue 路由守卫是 Vue.js 框架中 Vue Router 为了提供更精细的控制，允许开发者在路由切换时执行预处理或后处理逻辑的功能。这些逻辑可以包括权限检查、数据预加载等，确保只有满足特定条件的用户才能访问特定的页面。...
vue路由守卫,限制前端页面访问权限的例子
10-16
今天小编就为大家分享一篇vue路由守卫,限制前端页面访问权限的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 利用路由守卫判断是否登录的方法
10-17
在Vue.js应用中，路由守卫是一个强大的特性，它允许我们在路由进行切换时执行特定的逻辑，例如检查用户是否已登录。在这个例子中，我们将详细解释如何利用Vue Router的路由守卫来判断用户是否已登录，并据此决定是否...
vue3 系统进入页面前的权限判断和重定向
鹤渺的星球
02-06 3043
经常有系统的权限判定，比如某个页面只能角色a进入，或者一个系统多个页面都有权限设置，根据用户的权限判断是否能进入页面，这类权限控制应该是比较基础和常见的吧。这次就记录一下我之前做的权限控制流程。
Vue初学——路由1.基本使用
wfy17030212的博客
01-04 628
Vue中路由,vue-router,vue,routes,path,router-link,
vue全局前置路由守卫、全局后置路由守卫及独享路由守卫
weixin_47013351的博客
04-18 1810
全局前置路由守卫 在路由跳转之前，我们可以对路由进行权限限制，它会传递一个回调函数，里面有三个参数 // to: 目标路由 // from: 当前路由 // next() 跳转 router.beforeEach((to, from, next) => { if (to.meta.isAuth) { if (localStorage.getItem('name') == 'zz') { next() } else {
Vue项目配置路由以及设置路由守卫的正确方式（无坑可食用）
yinzisang的博客
12-23 2726
一、首先安装路由插件 cnpm install vue-router --save-dev 二、新建一个router文件夹，文件下新建一个index.js文件 三、index.js中引入router，代码如下 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export const constantRoutes = [ { path: '/PixiDemo', componen..
Vue中的路由守卫
z12845464的博客
12-29 8347
1.全局守卫2.组件级守卫3.单个路由独享的守卫
vue中进入路由页面和离开路由页面后执行函数
热门推荐
web前端进阶 黑客的博客
03-20 2万+
进入路由页面 mounted(){ this.$nextTick(()=>{ show(); }) } 离开路由页面后执行函数 destroyed: function () { console.log("我已经离开了！"); this.stopTimer(); }, 说明：destroyed是与methods、...
vue3的七种路由守卫
qq_36825145的博客
11-16 4569
路由守卫
vue3的7种路由守卫使用大全
前端程序员、项目经理、人工智能博主
11-23 4637
1.使用方式：main.js中配置,和beforeEach相反，它是在路由跳转完成后触发，它发生在beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫）之前。1.使用方式：main.js中配置,在路由跳转前触发，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚。路由守卫(导航守卫)分为三种：全局守卫（3个）、路由独享守卫（1个）、组件的守卫（3个）全局路由守卫有三个：全局前置守卫，全局后置守卫,全局解析守卫。
vue 路由守卫隐藏某个路由
最新发布
07-26
Vue Router 的路由守卫是一种非常强大的机制，允许开发者在组件加载前执行一些预先定义的钩子函数。通过这些钩子函数，你可以控制哪些用户可以访问特定的页面、修改请求的数据等。 ### 添加权限验证的路由守卫 在 Vue.js 中添加权限验证的路由守卫通常涉及到以下几个步骤： #### 步骤一：创建权限检查函数 首先，你需要在你的项目中定义一个全局或局部的函数来检查用户的权限。例如： ```javascript // 在 src 目录下创建一个文件如 auth.js export function checkPermission(permissions) { // 这里可以替换为你实际的应用场景中的权限判断 const userPermissions = ['admin', 'editor']; // 假设 admin 和 editor 有权限访问某些页面 return userPermissions.includes(permissions); } ``` #### 步骤二：设置路由守卫 接下来，在 `router` 对象中使用 `beforeEach` 钩子来设置路由守卫。这个钩子会在每个路由的导航之前被调用。 ```javascript import { createRouter, createWebHistory } from 'vue-router'; import HomeView from '../views/HomeView.vue'; import Auth from './auth.js'; // 引入上面定义的权限检查函数 const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'home', component: HomeView, meta: { requiresAuth: true // 标记该路由需要认证 } }, // 其他路由... ], }); router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { // 检查当前登录状态是否满足条件 if (!checkPermission('admin')) { // 如果未登录或无权限，则跳转到登录页 alert('您需要登录并拥有相应权限才能访问此页面'); next({ path: '/login', replace: true }); } else { // 否则继续执行导航 next(); } } else { // 如果路由不需要认证，则直接进入下一步 next(); } }); ``` #### 步骤三：应用权限检查 最后，将上述配置应用于你的应用程序中。通常这意味着在所有需要权限验证的路由上应用同样的规则，以及在登录页面或首页上显示适当的提示信息给用户。 ### -相关问题- 1. Vue路由守卫是如何工作的？ 2. 如何在Vue中自定义路由守卫？ 3. 是否存在除了全局之外的其他类型的Vue路由守卫？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值