React-路由守卫 访问控制-Route组件的render

目标

当login跳转到lindex的时候，需要判断这次跳转是否登录是否有权限进入。(鉴权/路由守卫)

1.Route的上使用render格式

Route的作用是当path匹配成功时，加载显示对应的组件
格式：

<Route path="/login" component={组件}>

或者：

通过render回调函数把组件return出去

• 尽然是函数就可以写逻辑操作了

<Route path="/login" render={() => { return <组件/>} }>

2.render的基本使用

实例代码：

<Route path="/home" render={()=>{
  //1.判断localStorage里面是否有token
  const token = !!localStorage.getItem('token')
  //2. 判断
  if(token) {// 如果有就return Layout组件
    return <Layout></Layout>
  } else { // 否则就重定向去 login
    return <Redirect to="/login"><Redirect>
  }
}

3. 访问控制-组件封装

将访问控制封装成组件方便，方便复用与维护

import React from 'react'
import { Route, Redirect } from 'react-router-dom'
// 我们需要解构所有的属性，除了component属性
export default function PrivateRoute(props) {
  // 1.判断localStorage里面是否有token
  const token = !!localStorage.getItem('token')
  // 2.用一个变量接一下父组件传过来 成功跳转的组件
  const Com = props.component
  return (
    <Route
      path={props.path}
      render={() => {
        if (token) { // 有token就return Com组件
          return <Com ></Com >
        } else { // 否则重定向到login
          return <Redirect to="/login"></Redirect>
        }
      }}
    ></Route>
  )
}

4.使用封装组件

直接调用组件传两个参数，要跳转的url与要跳转的组件

<AuthRoute path="/layout" component={Layout} />