您现在的位置是:首页 > 综合文章 > reactreact

react路由实现简单的路由鉴权

譬如朝露2019-10-05react577人已围观

简介例如我们把路由拆开,然后某些路由需要用户登陆才能访问,否则就返回登陆页面//routerConfig 路由配置,authPath未登录返回的页面 Auth是否...

例如我们把路由拆开,然后某些路由需要用户登陆才能访问,否则就返回登陆页面

//routerConfig 路由配置,authPath未登录返回的页面 Auth是否登陆
function renderRouter(routerConfig, authPath, Auth) {
  return routerConfig.map((route, index) => {

    return <Route key={index} path={route.path} exact={route.exact} render={() => {
      //如果需要登陆
      if (route.requiresAuth) {
        //判断是否登陆
        if (Auth) {
          return < Route key={index} path={route.path} exact={route.exact} component={route.component}></Route>
        } else {
          return <Redirect to={{ pathname: authPath }} />
        }

      } else {
        //不需要登陆
        return < Route key={index} path={route.path} exact={route.exact} component={route.component}></Route>
      }
    }} ></Route>
  })
}

定义一个函数,routerConfig代表的是路由信息,authPath代表用户没有登陆返回的页面,auth用户是否登陆

const routes = [
  {
    path: '/',
    exact: true,
    component: Home
  },
  {
    path: '/about:id',
    exact: true,
    component: About,
    requiresAuth: true,
  },
  {
    path: '/login',

    component: Login,

  },
  {
    path: '/list',
    exact: true,
    component: List,
    requiresAuth: true,
  },
  {
    path: '*',

    component: NotFoun,

  }
]

routes代表的是路由信息,requiresAuth当前路由是否需要登陆

完整代码如下:

import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch, Redirect } from 'react-router-dom'

const routes = [
  {
    path: '/',
    exact: true,
    component: Home
  },
  {
    path: '/about:id',
    exact: true,
    component: About,
    requiresAuth: true,
  },
  {
    path: '/login',

    component: Login,

  },
  {
    path: '/list',
    exact: true,
    component: List,
    requiresAuth: true,
  },
  {
    path: '*',

    component: NotFoun,

  }
]

function Home() {
  return <h1>首页</h1>
}
function About() {

  return <h1>关于</h1>
}

function List() {
  return <h1>列表</h1>
}

function NotFoun() {
  return <h1>404</h1>
}
function Login() {
  return <h1>请先登陆</h1>
}
//routerConfig 路由配置,authPath未登录返回的页面 Auth是否登陆
function renderRouter(routerConfig, authPath, Auth) {
  return routerConfig.map((route, index) => {

    return <Route key={index} path={route.path} exact={route.exact} render={() => {
      //如果需要登陆
      if (route.requiresAuth) {
        //判断是否登陆
        if (Auth) {
          return < Route key={index} path={route.path} exact={route.exact} component={route.component}></Route>
        } else {
          return <Redirect to={{ pathname: authPath }} />
        }

      } else {
        //不需要登陆
        return < Route key={index} path={route.path} exact={route.exact} component={route.component}></Route>
      }
    }} ></Route>
  })
}

function App() {
  return (
    <div className="App">
      <Router>
        <ul>
          <li><Link to='/'>首页</Link></li>
          <li><Link to='/about'>关于</Link></li>
          <li><Link to='/list'>列表</Link></li>
        </ul>
        <hr />
        <Switch>
          {/* <Route exact path='/' component={Home}></Route>
          <Route path='/about' component={About}></Route>
          <Route path='/list' component={List}></Route> */}
          {
            renderRouter(routes, '/login', true)
          }
        </Switch>
      </Router>
    </div >
  );
}

export default App;


譬如朝露

文章评论

表情

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

站长特荐

关闭
QQ 微信 支付宝扫一扫打赏