react-router拦截与配置

本文介绍如何在React应用中使用react-router-dom实现动态路由配置,并结合组件生命周期进行权限验证,确保未授权用户无法访问特定页面。

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

import React, { Component } from 'react';
import { Route, Switch, Redirect  } from 'react-router-dom';
import Test1 from '../view/Test1';
import Test3 from '../view/Test3';
const routes = [
    {
        path: "/",
        exact: true,
        name: "test1",
        component: Test1,
        meta: {
            auth: 0
        }
    },
    {
        path: "/test3",
        exact: true,
        name: "test3",
        component: Test3,
        meta: {
            auth: 0
        }
    }
]
class IndexRouters extends Component {
    componentWillMount() {}
    render() {
        return (
            <Switch>
                {
                    routes.map((item, index) => {
                        return (
                            <Route
                                key={index}
                                path={item.path}
                                exact={item.exact}
                                render={
                                    props => {
                                        if (item.meta.auth === 0) {
                                            return <item.component {...props} route={item} />
                                        } else {
                                            return <Redirect to={{ pathname: "/login", state: { from: props.location } }} />
                                        }
                                    }
                                }
                            >
                            </Route>
                        )
                    })
                }
            </Switch>
        )
    }
}

export default IndexRouters

一般通过配置动态路由以及加上路由组件的声明周期加以校验。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值