动态路由拦截

天不生我鹤暮辞

于 2023-03-25 09:34:54 发布

阅读量99

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/userNing/article/details/129763043

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

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

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