react动态渲染路由，判断用户权限，判断用户是否登录，判断路由重定向

最新推荐文章于 2025-09-19 20:36:42 发布

原创最新推荐文章于 2025-09-19 20:36:42 发布 · 3.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#react #前端

react 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在React应用中如何动态渲染路由，并实现用户权限判断和登录状态检查，以及未授权时的重定向操作。主要分为三个步骤：首先在APP主文件配置路由，接着创建路由数据文件，最后编写具体的路由组件。

第一步，在APP主文件中做如下配置

import {HashRouter} from 'react-router-dom'//引入哈希路由
import routerList from './router/index'//路由数据文件
import PrivateRoute from './component/PrivateRoute/PrivateRoute'//路由组件
function App() {
  return (
    <div className="App">
      <HashRouter>
        <PrivateRoute routerList={routerList}/>
      </HashRouter>
    </div>
  );
}

第二步，书写路由数据文件

export default [
    {
        path:'/',
        name:'Login',
        redirect:'/Login',
        meta:{require:false}
    },
    {
        path:'/Login',
        name:'Login',
        component:Login,
        meta:{require:false}
    },
    {
        path:'/Main',
        name:'Main',
        redirect:'/Main/Home',
        component:Main,
        meta:{require:true},
        role:['admin','user1','user2'],
        children:[
            {
                path:'/Main/Home',
                name:'首页',
                component:Home,
                meta:{require:true},
                role:['admin','user1','user2'],
            },
        ]
    }
]

第三步，书写路由组件

import React from 'react'
import {Route,Switch,withRouter,Redirect} from 'react-router-dom'
//withRouter用于向下传递props
import {observer,inject} from "mobx-react";
import NoPermissions from '../../component/NoPermissions/NoPermissions'//引入权限不足组件
@inject('userStore')//调用判断用户是否登录的方法
@observer
class PrivateRoute extends React.Component {
    routerFun = (list)=>{
        //console.log(list)
        return list.map((route)=>{
            if(route.meta&&route.meta.require){//第一步，验证是否需要登录就可进入
                if(this.props.userStore.userMessage.isLogin){//判断是否登录
                    const permissions = this.props.userStore.userMessage.permissions//获取登录用户的权限
                    const role = route.role//获取路由文件中的权限
                    if(role.includes(permissions)){//比较权限
                        if(route.children){//路由是否存在子路由
                            return  <Route key={route.name} path={route.path} render={()=>
                                <route.component key={route.name} {...this.props}>
                                    {this.routerFun(route.children)}
                                    <Route key={route.name} exact path={route.path} render={()=><Redirect to={route.redirect}/>}/>
                                </route.component>
                            }/>
                        }else {//渲染路由
                            return  <Route key={route.name} exact path={route.path} component={route.component}/>
                        }
                    }else {//权限不足
                        return <Route key={route.name} exact path={route.path} component={NoPermissions}/>
                    }
                }else {//没有登录
                    return <Redirect key={route.name} to='/Login'/>
                }
            }else if (route.redirect){//第二步，判断该路由是否需要重定向
                return <Route key={route.name} exact path={route.path} render={()=><Redirect to={route.redirect}/>}/>
            }else {//不需要登录
                return <Route key={route.name} path={route.path} exact component={route.component}/>
            }
        })
    }
    render() {
        let {routerList} = this.props
        return (
            <Switch>
                {this.routerFun(routerList)}
            </Switch>
        )
    }
}

export default withRouter(PrivateRoute)