vue-router的鉴权和守卫(精华版）

最新推荐文章于 2024-05-08 13:26:53 发布
最新推荐文章于 2024-05-08 13:26:53 发布
阅读量599 收藏 4
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zgtby/article/details/117470397
版权
本文详细介绍了Vue Router的鉴权方法，包括通过`addRoutes`动态注入路由和`beforeEach`钩子限制路由跳转。同时，探讨了路由守卫的三种类型：全局守卫、组件级守卫和单个路由独享的钩子，阐述了它们在页面跳转过程中的作用和使用场景。
摘要由CSDN通过智能技术生成

vue-router

一、怎么理解vue-router

路由导航守卫
又叫路由的钩子函数又叫路由的生命周期函数
就是路由 从开始进入路径到跳转结束这个过程中 到了某个阶段会自动执行的函数

二、实现鉴权的方式分两种：

1、通过vue-router addRoutes 方法注入路由实现控制

通过请求服务端获取当前用户路由配置，编码为 vue-router 所支持的基本格式（具体如何编码取决于前后端协商好的数据格式），通过调用 this.$router.addRoutes 方法将编码好的用户路由注入到现有的 vue-router 实例中去，以实现用户路由。
addRoutes 方法仅仅是帮你注入新的路由，并没有帮你剔除其它路由！

2、通过vue-router beforeEach 钩子限制路由跳转

通过请求服务端获取当前用户路由配置，通过注册 router.beforeEach 钩子对路由的每次跳转进行管理，每次跳转都进行检查，如果目标路由不存在于当前路由中，取消跳转，转为跳转错误页。

方法①和②的区别是一个是自动的，一个是手动的。

三、路由守卫

作用：守卫页面跳转 监听页面跳转 在页面跳转前或者跳转后执行一些操作。
路由的钩子函数 有三个参数 分别是

最低0.47元/天 解锁文章
迪邦尼
关注
vue-router 鉴权 守卫
weixin_49612239的博客
06-04 333
vue项目前端鉴权方式常用的有以下三种： 1、渲染菜单时控制模块按钮的显示隐藏（不足：直接输入链接仍然可以访问模块） 2、在路由导航守卫中拦截，针对没有权限的模块进行重定向（不足：每次访问模块都需要鉴定权限，模块数量过多时会影响系统性能） 3、借助vue-router 2.x版本新加的API addRouters动态添加路由信息（不足：首次加载需要解析和添加，多跳转一次路由） 综上所述，权衡之后选择了addRoutes动态添加，首屏加载时间可能会多出0.5s左右，加载一次之后后续就不需要再进行处理，可以提升
vue-router
shiqianhui1124的博客
05-23 230
vue-router 路由原理 路由就是用来解析URL以及调用对应的控制器，并返回从视图对象中提取好的网页代码给web服务器,最终返回给客户端。 Ⅰ、两种模式： hash模式：在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取； 特点： hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用， hash不会重加载页面。 hash 模式下，仅hash 符号之前的内容会被包含在请求中，如 http://ww..
vue-router 鉴权
weixin_47420579的博客
06-04 357
登录成功后做本地存储与store存储，并进行跳转。 1、Login.vue关键代码 async handleLogin(e) { e.preventDefault() let parmas = { username: this.model.username, password: this.model.password } const res = await this.$http.get('/api/login', params) const {
vue-router的鉴权、守卫
weixin_51288146的博客
06-10 1035
一、什么是vue-router vue-router是路由导航守卫，又叫路由的钩子函数或者路由的生命周期函数。 就是路由从开始进入路径到跳转结束这个过程中，到了某个阶段会自动执行的函数。 原理： 路由就是用来解析URL以及调用对应的控制器，并返回从视图对象中提取好的网页代码给web服务器,最终返回给客户端。 路由的两种模式： hash模式：在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取; 特点： hash虽然在URL中，但不被包括在HTTP请求中；
vue-router的鉴权和守卫
weixin_57750909的博客
06-07 189
vue-router
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
在这个"vue3.x+vite+ts+vue-router@4.x 路由使用demo"中，我们可以学习到以下关键知识点： 1. **Vue3 Composition API**：Vue3 引入了Composition API，允许开发者将逻辑组件化，提高了代码的复用性和组织性。在...
vue-router的鉴权 守卫
weixin_57980265的博客
06-06 242
vue-router鉴权的方式 1、通过vue-router addRoutes 方法 通过请求服务端获取当前用户路由配置，编码为 vue-router 所支持的基本格式（具体如何编码取决于前后端协商好的数据格式），通过调用 this.$router.addRoutes 方法将编码好的用户路由注入到现有的 vue-router 实例中去，以实现用户路由。 addRoutes 方法仅仅是帮你注入新的路由，并没有帮你剔除其它路由！ 2、通过vue-router beforeEach 钩子限制路由跳转 通过
vue-router路由守卫以及鉴权
mszLOVEyjj的博客
06-06 6062
首先我们先了解路由守卫： 路由守卫有点类似于ajax的请求拦截，就是请求发送之前先给你拦截住一些事情之后再去发送请求，同样这里的理由守卫意思差不多；简单理解为就是你进路由之前，首先把你拦住，对你进行检查；当然，路由守卫不仅仅只是在你进入之前拦住你，还有其他钩子函数进行其他操作； vue-reuter提供了三大类钩子函数来实现路由守卫 1.全局钩子函数（beforEach，afterEach） 2.路由独享的钩子函数（beforeEnter） 3.组件内的钩子函数（beforerouterEnter，befo
Vue 权限控制的两种方法(路由验证)
12-08
下面介绍两种权限控制的方法： 路由元信息(meta) 动态加载菜单和路由(addRoutes) 路由元信息(meta) 如果一个网站有不同的角色，比如 管理员 和 普通用户 ，要求不同的角色能访问的页面是不一样的 这个时候我们就可以 把所有的页面都放在路由表里 ，只要 在访问的时候判断一下角色权限 。如果有权限就让访问，没有权限的话就拒绝访问，跳转到404页面 vue-router 在构建路由时提供了元信息 meta 配置接口，我们可以在元信息中添加路由对应的权限，然后在路由守卫中检查相关权限，控制其路由跳转。 可以在每一个路由的 meta 属性里，将能访问该路由的角色添加到 role
详解基于vue-router的动态权限控制实现方案
08-29
本篇文章主要介绍了详解基于vue-router的动态权限实现方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue+vue-router+路由守卫实现路由鉴权功能
一步一个脚印，踏实努力，向着目标前进
05-31 2368
在路由设置中，我们将路由拆分为两类，需要进行鉴权的路由和不需要进行鉴权的路由。需要进行鉴权的路由需要在路由元信息中添加requiresAuth: true属性。路由鉴权功能是Vue+vue-router框架中常见的功能之一，也是前端安全性的一个重要方面。最后，在需要鉴权的页面中，我们可以使用beforeRouteEnter守卫来在进入页面前获取用户信息。在路由设置中，我们为需要鉴权的路由添加requiresAuth元信息。
Vue Router 路由鉴权
猫老板的豆
06-14 4203
首先，你需要在 Vue Router 中定义你的路由。你可以为每个路由添加一个 meta 字段，用于存储关于该路由的额外信息，例如权限要求。meta: {title: '登录',requiresAuth: false // 不需要权限的路由},meta: {title: '我的地址',requireAuth: true // 只要此字段为true，必须做鉴权处理// 更多...
Vue-router实现鉴权控制
weixin_46115925的博客
04-01 574
Vue-router实现鉴权控制 案例背景 鉴于Vue前端框架的易用性及优秀的性能，被越来越多的业务组件前端开发所采用。那么针对不同的用户，自然产生了对前端路由进行权限控制这一需求。本文将对Vue环境下，针对前端路由权限控制的实现进行说明。 技术背景 首先解释一下什么是前端路由，简单来说，前端路由就是客户端随着浏览器地址栏不同的URL地址来展示给用户不同的内容或页面，无需依赖服务器。而router是一种机制，相当于一个管理者，由它来管理路由。 在Vue项目中实现路由管理也是比较便捷的，因为我们页面中的所有内
Vue/React实现路由鉴权/导航守卫/路由拦截(react-router v6)
Coding and studying
08-30 9212
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React框架。
vue2+vue3后台管理之路由鉴权
AROUND
05-08 573
在常见的后台管理项目中必定有的路由权限的相关问题，那么今天我们就来手膜手教程实现管理后台的路由鉴权，分别区分vue2和vue3分别的实现方式，那就直接上干货在Vue 2.x中实现路由鉴权，主要通过vue-router的导航守卫（navigation guards）来完成。
Vue Router 路由生命周期钩子/路由导航守卫/路由鉴权
猫老板的豆
04-12 2576
Vue Router 提供了路由钩子（Route Hooks），允许你在路由发生变化时执行一些操作。这些钩子可以在路由进入、离开等关键时刻触发，从而实现一些特定的功能，比如页面权限控制、数据预加载等。路由守卫简单来讲就是监听页面进入修改，和离开的功能。to：即将要进入的路由对象from：当前导航正要离开的路由next：一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。next()：进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是。
vue-router4 路由守卫
最新发布
09-23
Vue Router 4（也称为 Vue Router 4.x 或者 Vue Router 4.0）是一个用于构建单页面应用（SPA）的路由管理库，它允许你在导航期间添加额外的功能，如授权、数据验证或状态切换前的操作。路由守卫（Guards）是Vue Router 4的核心特性之一，它们有三种类型： 1. **Before Navigation Guards** (全局前置守卫)：在每次导航开始之前运行，包括组件内的嵌套路由。常见的用途有登录检查、权限控制等。可以设置两个钩子函数：`beforeEach` 和 `beforeResolve`。 ```javascript router.beforeEach((to, from, next) => { // ... next(); }); ``` 2. **Route-level Guard** (路由级前置守卫)：每个单独的路由都有自己的前置守卫，只针对特定路径生效。常用的钩子函数是 `beforeEnter`。 ```javascript const router = new VueRouter({ routes: [ { path: '/private', component: PrivateComponent, beforeEnter(to) { // ... next(); // 让导航继续 // next(false); // 阻止导航 } } ] }); ``` 3. **After Navigation Guards** (后置守卫)：导航完成后运行，无论导航是否成功。这两个是 `afterEach` 和 ` afterEach败 resolve`。 ```javascript router.afterEach((to, from, error) => { // ... }); ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值