动态路由拦截

最新推荐文章于 2026-01-01 17:43:06 发布

原创最新推荐文章于 2026-01-01 17:43:06 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

该文章演示了在React应用中如何导入并使用path-to-regexp库来转换和匹配正则表达式路径。通过定义不同的路由权限如pt和vip，以及当前的pathname，文章展示了如何将权限路由数组转换为正则表达式数组，并判断当前路由是否在允许的权限范围内。

安装插件path-to-regexp

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>
  )
}