vue 地址栏手动输入权限范围外的路由如何处理 beforeEach跳转路由验证

在Vue项目中,基于角色的权限路由控制是必要的。当用户尝试通过地址栏访问权限范围外的页面时,需要进行拦截。使用router的beforeEach钩子函数,检查即将进入的路由是否在用户的菜单数据中,若不在则跳转到登录页面。此方法可以确保角色B无法访问其无权访问的如'userManagement'这样的页面。

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

      项目中导航是根据登录人的角色不同,后台返回的菜单导航数据也不同来生成的。假如A角色有userManagement、roleManagement、tagManagement三个权限的路由,B角色有roleManagement、tagManagement两个角色的路由,正常情况下B角色进入网站是看不到userManagement这个页面的,但是如果B角色手动在地址栏输入,如下图所示,还是可以访问userManagement页面。

这个时候就用到了router的beforeEach钩子函数

beforeEach函数有三个参数:

  • to:router即将进入的路由对象
  • from:当前导航即将离开的路由
  • next:Function,进行管道中的一个钩子

我们可以在main.js里这样写(红框内是定义的全部路由):

var menuData1 =JSON.parse(localStorage.getItem("menuData"));//menuData是该用户所有导航菜单数据

router.beforeEach((to, from, next) => {

let isExist =

### Vue 3 中限制用户通过地址栏 URL 进行路由跳转 为了防止用户直接在浏览器地址栏输入特定 URL 来访问受保护的页面,可以利用 `beforeEach` 导航守卫来拦截导航请求并执行自定义逻辑。当检测到未授权访问时,重定向至登录或其他适当页面。 #### 使用 beforeEach 守卫实现权限控制 ```javascript import { createRouter, createWebHistory } from 'vue-router'; import Home from './views/Home.vue'; import ProtectedPage from './views/ProtectedPage.vue'; const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/protected', name: 'ProtectedPage', component: ProtectedPage, meta: { requiresAuth: true } } ]; const router = createRouter({ history: createWebHistory(), routes }); router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { // 此处应替换为实际的身份验证检查方法 let isAuthenticated = false; if (!isAuthenticated) { next('/'); // 或者其他错误处理页面 } else { next(); } } else { next(); } }); ``` 上述代码展示了如何配置带有元数据字段 `requiresAuth` 的路由记录,并在每次导航前调用全局前置钩子函数判断目标路径是否需要身份验证[^1]。 对于那些标记了 `meta.requiresAuth=true` 属性的路由条目,如果当前会话未经认证,则不允许加载对应组件而是转向首页或者其他指定位置;反之则正常继续浏览流程。 此还可以结合 Vuex 存储库管理应用状态,以便更好地维护用户的登录信息以及在整个应用程序范围内共享这些数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值