react中没有导航守卫，需要自己封装！

Recat不同页面访问权限控制 - 鉴权

1. PC 端项目来说

• 有的页面不需要登录就可以访问，比如，登录页。
• 有的页面需要登录后才能访问，比如，项目后台首页、内容管理等（除了登录页面，其他页面需要登录才能访问）

因此，就需要对项目进行登录访问控制：

• 让需要登录才能访问的页面，必须在登录后才能访问。
• 在没有登录时，直接跳转到登录页面，让用户进行登录。

2. 如何实现登录访问控制呢？

• 分析：不管哪个页面都是通过路由来访问的，因此，需要从路由角度来进行控制
• 思路：创建 AuthRoute 组件，判断是否登录，1 登录直接显示要访问的页面 2 没有登录跳转到登录页面

难点：React中没有导航守卫，需要自己封装

一、分析 AuthRoute 鉴权路由组件

• 场景：限制某个页面只能在登录的情况下访问。
• 说明：在 React 路由中并没有直接提供该组件，需要手动封装，来实现登录访问控制（类似于 Vue 路由的导航守卫）。
• AuthRoute 组件实际上就是对原来的 Route 组件做了一次包装，代替默认的 Route 组件，来配置路由规则。用法相同，来实现了一些额外的功能。
• <Route path component render> render 方法，指定该路由要渲染的组件内容（类似于 component 属性）。

// 使用方式：
<AuthRoute path="/rent/add" component={Rent} />

二、实现自己的AuthRoute组件

• 1.新增hasToken方法

const hasToken = () => !!getToken()

export { setToken, getToken, removeToken, hasToken }

• 2.权限判断

import React from "react"
import { Route, Redirect } from "react-router-dom"
import { hasToken } from 'utils/storage'
function AuthRouter({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={(props) => {
        // console.log("props", props)
        if (hasToken()) {
          return <Component {...props}></Component>
        } else {
          return (
            <Redirect
              /* state 属性：表示给路由附加一些额外信息，此处，用于指定登录成功后要进入的页面地址。 */
              to={{ pathname: "/login", state: { from: props.location } }}
            ></Redirect>
          )
        }
      }}
    ></Route>
  )
}

export default AuthRouter

• 3.使用AuthRoute

{/* 路由规则 */}
<Switch> 
  <AuthRoute path="/home" component={Layout}></AuthRoute>
  <Route path="/login" component={Login}></Route>
  {/* Redirect 组件：重定向组件，通过 to 属性，指定要跳转到的路由信息。 */}
  <Redirect to="/login"></Redirect>
</Switch>

• 4.登录成功处理

submit = async (values) => {
  const { mobile, code } = values
  console.log(this.props)
  try {
    const res = await login(mobile, code)
    // 存储token
    // localStorage.setItem('itcast_geek_pc', res.data.token)
    setToken(res.data.token)
    // 跳转到首页
    const { state } = this.props.location
    if (state) {
      this.props.history.push(state.from.pathname)
    } else {
      this.props.history.push('/home')
    }
    message.success('登录成功', 1)
  } catch (err) {
    message.warning(err.response.data.message, 1)
  }
}

三、route组件的作用

<Route path="/home" component={Home}></Route>
<Route path="/login" component={Login}></Route>

• Route组件会根据当前地址的中地址 和 Route的path进行匹配，如果路径一直，那么这个对应的组件就会被渲染出来

• Route没有判断用户是否登录的能力，只会根据path判断是否要渲染对应的组件。

需求：让Route组件能够有逻辑，能够判断用户是否登录，，，，需要通过Route组件的render属性