动态路由拦截

最新推荐文章于 2025-12-08 09:18:56 发布

原创最新推荐文章于 2025-12-08 09:18:56 发布 · 123 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

该代码片段展示了如何在React应用中使用`useEffect`,`useState`hooks以及`path-to-regexp`库来处理路由权限。它将特定的路由路径转换为正则表达式，并根据用户权限（如pt）检查当前路径是否匹配允许的路由。

import React, { useEffect, useState } from 'react'
import { pathToRegexp } from 'path-to-regexp'


export default function Demo(props) {
  // 转换正则表达式
  const reg = pathToRegexp('/x3/:id')

  const router = {
    pt: ['/x1', '/x2/:id'],
    vip: ['/x1', '/x3/:id'],
  }
  // 获取到的路由权限
  const qx = 'pt'
  // 获取到的路由
  const pathname = '/x2/333'
  // 将权限路由数组转换为正则表达式数组
  const xxx = router[qx].map(dt => pathToRegexp(dt))
  // 判断在正则表达式数组里面是否有路由
  const isbool = xxx.find(dt => pathname.match(dt))

  console.log('isbool', isbool);

  return (
    <div>

    </div>
  )
}