封装一个AuthRoute路由拦截组件

最新推荐文章于 2023-11-07 17:02:40 发布

morenhaodan

最新推荐文章于 2023-11-07 17:02:40 发布

阅读量289

点赞数

文章标签： react.js vscode javascript

本文链接：https://blog.csdn.net/haodanzj/article/details/125232925

版权

该博客介绍了一个React组件`AuthRoute`的实现，该组件用于路由拦截。它根据用户是否有token来决定是否允许访问受保护的路由。如果用户已认证（isAuth()返回true），则正常渲染组件；否则，用户将被重定向到登录页面，并携带当前请求的路径作为登录后的返回位置。

摘要由CSDN通过智能技术生成

封装一个AuthRoute路由拦截组件,如果有token直接跳转,如果没有token 返回到登陆页面

import { Route, Redirect } from 'react-router-dom'
import { isAuth } from '../../utils'
//...剩余参数, 吧所有参数收集到一个数组或对象中,吧component单独拿出来
const AuthRoute = ({ component: Component, ...rest }) => {
  console.log({ ...rest })

  return <Route {...rest}
    render={(props) => {
      //判断是否登陆
      const auth = isAuth()
      if (auth) {
        //有token登陆成功 跳转
        //标签首字母需要大写,重命名component
        return <Component></Component>
      } else {
        //没有token没有登陆 重定向到登陆页面 并吧路由带过去
        // console.log(props.location.pathname)
        return <Redirect to={{
          pathname: '/login',
          state: { from: props.location.pathname }
        }}></Redirect>
      }
    }}
  ></Route>
}
export default AuthRoute