vue-router beforeEach导航守卫

最新推荐文章于 2024-05-09 09:07:36 发布
原创 最新推荐文章于 2024-05-09 09:07:36 发布 · 410 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入讲解了网站中路由权限控制的实现方式，通过导航守卫结合全局状态管理vuex，确保只有登录用户才能访问特定页面，有效提升网站安全性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在各大网站都涉及到路由的权限控制，简单的举个例子：比如访问需要登录的页面 没有登录的用户则被转跳到登录页面进行登录，这就是是导航守卫（一般都是结合全局状态管理vuex来使用的）

这个案例分为 index.vue(比作网站起始页), body.vue(需要登录过后才能看到的页面), login.vue(登录页)
第一步：先在main.js 文件中引入router/index.js(如图)：
引入钩子
再来看看路由页（添加meta项）：
路由页添加meta
最后一步就是在main.js中编辑钩子规则：
很简单，编辑路由规则

总结：钩子就类似于java的拦截器，钩子的判断条件可以基于全局动态属性管理的控制，那么这个钩子就有深度了，在使用钩子时一定要注意不然会进入死循环，前置钩子————在每次路由改变的时候执行

router 守卫跳转之前router.beforeEach 之后afterEach
05-15 1247
作用：跳转前进行判断拦截。 // meta.requiresAuth添加该字段，表示进入这个路由是需要登录的 function requiresAuth(to,next){ if (to.matched.some(record => record.meta.requiresAuth)) { // 判断该路由是否需要登录权限 next({ path: '/login', query: { redirect: to.fullPath }
Vue-router 中的导航守卫
RoGroovy的博客
09-21 141
总结起来，Vue-router 的导航守卫提供了一种灵活的机制，让我们能够在路由导航过程中控制页面的访问权限和执行相关操作。Vue-router 是 Vue.js 官方的路由管理器，它允许我们在应用中使用导航功能。导航守卫是 Vue-router 提供的一种机制，用于在路由导航过程中控制页面的访问权限和执行相关操作。在 Vue-router 中，导航守卫可以分为全局守卫和路由独享守卫。全局守卫会在每个路由导航中都起作用，而路由独享守卫只会在特定的路由配置中起作用。：在每个路由导航之前调用，且在。
VUE中router.beforeEach不被执行
weixin_41519423的博客
04-28 3948
VUE中router.beforeEach不被执行
Vue2的router.beforeEach不生效问题
qq_49416650的博客
04-03 1366
Vue的router.beforeEach不生效问题
Vue 项目中 根目录中router路由拦截 beforeEach 常用的写法
lzfengquan的博客
09-01 1369
上代码吧 在我们的router.js文件下 /* * @Description: 路由设置 */ import Vue from "vue"; import Router from "vue-router"; import store from '../store/store'; // 用到的vuex--store // 封装的路由引入进来 import nd from './nd'; import q from './q'; // 按钮权限 import {getCurrent
router导航守卫 - router.beforeEach()
asfcyg的博客
03-27 1238
导航守卫主要通过跳转或取消的方式守卫导航 导航守卫可以用于在页面跳转前做一些需要的逻辑处理 例如：点击我的，登录前跳转进入登录页面，登录后跳转进入我的页面 可以在router文件夹下的index.js中写入路由导航 router.beforeEach((to, from, next) => { // to：即将进入的路由对象，包含name、params、meta等 // from：即将离开的路由对象，包含name、params、meta等 // next()：确保调用next()，否则钩子
详解vue-router的导航钩子(导航守卫)
01-21
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { ... ... }) 其中： to：将要访问的路径 from：代表从哪个路径跳转来的 next：是一个函数，表示放行。有如下几种调用方式
《Vue入门到精通系列之五》--- vue-router详解_vue-router beforeeach和aftereach(1)
最新发布
2301_82244509的博客
05-09 541
我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
关于vue-router的beforeEach无限循环的问题解决
08-29
在使用 Vue Router 时，`beforeEach` 是一个非常重要的导航守卫，它会在每次路由变化之前执行，用于进行权限验证、数据预加载等操作。然而，如果不正确地使用 `beforeEach`，可能会导致无限循环的问题，这通常是由于...
前端Vue篇之Vue-router 导航守卫有哪些、Vue-router 路由钩子在生命周期的体现、Vue-router跳转和location.href有什么区别
星辰迷上大海的博客
03-06 2042
Vue Router 中的导航守卫包括 beforeEach、beforeResolve、afterEach 和路由独享守卫 beforeEnter。这些守卫允许您在路由切换前、解析完成后和路由切换后执行自定义逻辑，比如权限验证、全局加载状态等。
vue router导航守卫（router.beforeEach()）的使用详解
12-01
导航守卫         导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。（记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这些变化，或使用beforeRouteUpdate的组件内守卫。） 好久没写一些东西了，总是感觉有啥缺少的。~~~~恰好碰到最近在写一个移动端项目，遇到了如何使同一个链接在不同条件下跳转到不同路由组件问题，譬如大家经常看到手机中没登录跳转登录页，登陆后跳转个人信息页等。废话不多说了，直接上图： 这是没登录状态，点击下面mine按钮跳转至登录页 这个是我登录
router.beforeEach的用法简单介绍
热门推荐
simple_T的博客
07-27 1万+
router.beforeEach一般在main.js里面使用: 这里做补充说明下两个参数, to: 下一个页面/即将要进入的目标 form: 当前页面 //这里是main.js里面 router.beforeEach((to, from, next) => { var channel = utils.getUrlParam('channel', from.fullPath) || '' if (channel) { localStorage.setItem('channel', c
vue实现路由权限 :router.beforeEach实现路由判断页面未登录跳转到登录页面(路由拦截)
Harrietjia的博客
11-12 1800
1:在main.js(我是在app.js里面写的)全局文件中判断cookie中是否存在token,存在就按照正常的页面跳转,不存在就跳转到登录界面: router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)) { // 判断该路由是否需要登录权...
vue-router导航守卫(简单使用)
qq_43217258的博客
07-03 383
导航守卫 // 进入前守卫 router.beforeEach((to, from, next) => { NProgress.start() next() }) // 进入后守卫 router.afterEach((to) => { NProgress.done() document.title = to.meta.title }) to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该
Vue 导航前置守卫router.beforeEach()的用法，实现自动登录
weixin_42966151的博客
12-19 1462
使用router.beforeEach()+localStorage.setItem()实现自动登录
vue 路由全局拦截beforeEach
周凤伟的博客
02-08 1860
beforeEach钩子函数有3个参数，to，from，next，遍历所有的路由实行拦截。 我们可以在路由映射表中增加元信息，可以实现全局拦截或者局部拦截的方式。有关于元信息可以去官网搜索mate。 to : 从哪来 from：到哪去 next：放行 router.js let router = new Router({ routers:[ // 路由写在里面 ] }) beforeE...
router.beforeEach()用法解释
m0_49016709的博客
12-15 6722
router.beforeEach（）一般用来做一些进入页面的限制。比如没有登录，就不能进入某些页面，只有登录了之后才有权限查看某些页面。说白了就是路由跳转前根据业务逻辑判断是否拦截。 const whiteList = ["/login", "/loginpassword"]; // 全局路由守卫，如果不是登录状态，则到登录页面 router.beforeEach((to, from, next) => { //验证token存在，则进入该页面 if (sessionStorage.token)
router传参接参（详细）router.beforeEach()
weixin_58431406的博客
06-22 9341
方法一：使用query来传递参数 1.传参this.$router.push({path: ‘/’, query: {参数名: ‘参数值’}) 2.接参this.$route.query.参数名。方法二：使用 params 1.传参this.$router.push({path: ‘/’, name: ‘’, params: {参数名: ‘参数值’}) 2.接参this.$route.params.参数名 .........
Vue——路由守卫（全局前置路由守卫beforeEach、全局后置路由守卫router.afterEach、独享路由守卫beforeEnter、组件内路由守卫 ）
weixin_51351637的博客
09-22 1万+
作用：对路由进行权限控制分类：全局守卫、独享守卫、组件内守卫。
掌握Vue-router：vue-router-demo深度分析
- 改善了导航守卫的调用机制。 - 优化了路由匹配和导航的性能。 - 使路由模式更加灵活。 - 增强了类型支持，适合使用 TypeScript 的项目。 #### 3. 编程式导航 在 Vue-router 中，编程式导航允许通过 JavaScript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值