封装鉴权路由组件封装

作用与目标

react中没有路由守卫，但是类似的功能有现成的。参考：

• https://v5.reactrouter.com/web/example/auth-workflow

能够封装鉴权路由组件实现登录访问控制功能

• 判断用户是否登录路由进入主页
• 未登录返回登录页

1.定义组件

1、分析组件需求

• 需要传入跳转组件
• 要跳转的路径
  
  

2、 定义私有路由组件。在 components 目录中创建 PrivateRoute路由组件：实现路由的登录访问控制逻辑

• 有token，正常访问
• 没有token，重定向到登录页面，并传递要访问的路由地址

核心代码：
components/PrivateRoute.js 中：

import { hasToken } from '@/utils/storage'
import { Route, Redirect, RouteProps} from 'react-router-dom'
// RouteProps是TypeScript 的类型如果没有用到TypeScript就直接省略掉（删除掉）
export const PrivateRoute = ({ children, ...rest }: RouteProps) => {
  return (
  	//...rest是剩余参数，这里就是除了children其他的属性全部放到rest对象中
    <Route
      {...rest}
      render={props => {
      	//判断是否登录（是否有token）登录了就返回传递过来的组件
        if (hasToken()) {
          return children
        }
		// 没有登录就跳转回login
        return (
          <Redirect
            to={{
              pathname: '/login',
              state: {
                from: props.location.pathname // 回跳地址
              }
            }}
          />
        )
      }}
    />
  )
}

注意: RouteProps是TypeScript 的类型如果没有用到TypeScript就直接省略掉（删除掉）

2. 使用路由组件

App.js 中：

import { PrivateRoute } from '@/components/PrivateRoute'

const App = () => {
  return (
    // ... 其他代码省略
    <PrivateRoute path="/profile/edit">
    	// 组件是使用children接收的，所以组件就是写在双标签内传递
      <ProfileEdit />
    </PrivateRoute>
  )
}