DDR爱好者之家

vue router 权限
站长资源 2024/11/1 佚名
54 1538
DDR爱好者之家 Design By 杰米

vue router 权限

路由的概念

在了解如何进行权限控制之前，我们首先需要了解一些路由相关的概念。所谓路由，就是指用户打开页面时浏览器需要发送 HTTP 请求，后台服务器会根据前端传递的参数返回相应的 HTML 页面或 JSON 数据。

前端路由和后端路由

前端路由和后端路由是两种不同的路由方式。前端路由，也称为客户端路由，是通过 JavaScript 操作浏览器的 history 对象实现的。前端路由优点是用户体验好，用户不必频繁刷新页面，只需要更新局部内容。而后端路由是指在服务器端配置 URL 规则，根据不同的 URL，服务器会返回对应的HTML 页面或 JSON 数据。

路由的权限控制

假如我们的应用需要对不同的用户进行权限管理，不同的用户只能访问到对应的路由。那么我们可以通过 Vue Router 的路由守卫来实现权限的控制。在 Vue Router 中，路由守卫分为全局守卫和路由独享的守卫。

全局守卫

全局守卫就是在任意路由跳转前、后都会被执行的函数，可以在全局守卫中实现权限控制。全局守卫有 3 个函数：beforeEach、beforeResolve、afterEach。

beforeEach函数

beforeEach 函数会在每次路由跳转前触发，它的参数是 to、from 和 next。to 表示即将要跳转的路由，from 表示当前路由，next 是一个函数用来控制路由跳转，如果需要进行路由跳转，则需要调用 next 方法。

beforeResolve函数

beforeResolve 函数会在路由跳转成功之前触发，和 beforeRouteEnter 的区别是 beforeResolve 是在路由组件的异步组件加载完成之后，再进行调用的。

afterEach函数

afterEach 函数会在每次路由跳转后触发，提供一个 to 和 from 参数用来获取当前路由和上一个路由的信息。

路由独享的守卫

路由独享的守卫是指仅对当前路由起作用的守卫，其与全局守卫一样，有 3 个函数，分别是 beforeEnter、beforeRouteUpdate、beforeRouteLeave。

beforeEnter函数

beforeEnter 函数是在路由配置的时候进行设置，在进入当前路由前会执行。

beforeRouteUpdate函数

beforeRouteUpdate 函数是在当前路由组件再次被使用时触发，参数和 beforeRouteEnter 函数一样。

beforeRouteLeave函数

beforeRouteLeave 函数是在离开当前路由前触发，不同于全局守卫，这里必须要手动调用 next。

通过使用 Vue Router 的路由守卫，我们可以非常方便地实现前端路由的权限控制。当用户访问未授权的路由时，我们可以通过全局守卫或路由独享的守卫跳转到登录页面或其他需要授权的页面。这些路由的权限控制可以帮助我们实现更加安全和可靠的应用，值得我们去学习和使用。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
DDR爱好者之家 Design By 杰米