react登录路由控制

登录访问控制

• AuthRoute 鉴权路由组件实现思路
• 参照官网自己封装AuthRoute 鉴权路由组件
• 实现修改登录成功后的跳转

概述

项目中的两种类型的功能和两种类型的页面：

两种功能：

• 登录后才能进行操作（比如：获取个人资料）
• 不需要登录就可以操作（比如：获取房屋列表）

两种页面：

• 需要登录才能访问（比如：个人中心页）
• 不需要登录即可访问（比如：首页）

对于需要登录才能操作的功能使用 axios 拦截器 进行处理（比如：统一添加请求头 authorization等）

对于需要登录才能访问的页面使用 路由控制

功能处理-使用axios拦截器统一处理token

• 在api.js 中，添加请求拦截器 (API.interceptors.request.user())
• 获取到当前请求的接口路径（url）
• 判断接口路径，是否是以/user 开头，并且不是登录或注册接口（只给需要的接口添加请求头）
• 如果是，就添加请求头Authorization

// 添加请求拦截器
API.interceptors.request.use(config => {
  const { url } = config
  // 判断请求url路径
  if (
    url.startsWith('/user') &&
    !url.startsWith('/user/login') &&
    !url.startsWith('/user/registered')
  ) {
    // 添加请求头
    config.headers.Authorization = getToken()
  }
  return config
})

• 添加响应拦截器 (API.interceptors.response.use())
• 判断返回值中的状态码
• 如果是400，标示token超时或异常，直接移除token

// 添加响应拦截器
API.interceptors.response.use(response => {
  const { status } = response.data
  if (status === 400) {
    // 此时，说明 token 失效，直接移除 token 即可
    removeToken()
  }
  return response
})

页面处理-AuthRoute鉴权路由组件

实现原理

• 限制某个页面只能在登陆的情况下访问，但是在React路由中并没有直接提供该组件，需要手动封装，来实现登陆访问控制（类似与Vue路由的导航守卫）

• 参数 react-router-dom的鉴权文档

• AuthRoute 组件实际上就是对原来Route组件做了一次包装，来实现一些额外的功能

  • 使用

• render方法：render props模式，指定该路由要渲染的组件内容

• Redirect组件：重定向组件，通过to属性，指定要跳转的路由信息

// 官网封装的核心逻辑代码
// ...rest  把之前的组件中传递的属性原封不动传递过来
function PrivateRoute({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      // render方法： render props模式，指定该路由要渲染的组件内容
      render={props =>
        // 判断是否登陆，如果登陆，跳转配置的component，如果没有登陆，利用 Redirect组件来进行重定向
        fakeAuth.isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              // 把当前的页面路径保存起来，方便用户登录后能够跳回当前页面
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );
}

封装AuthRoute鉴权路由组件

• 在components目录中创建AuthRoute/index.js 文件
• 创建组件AuthRoute并导出
• 在AuthRoute组件中返回Route组件（在Route基础上做了一层包装，用于实现自定义功能）
• 给Route组件，添加render方法，指定改组件要渲染的内容（类似与component属性）
• 在render方法中，调用isAuth() 判断是否登陆
• 如果登陆了，就渲染当前组件（通过参数component获取到要渲染的组件，需要重命名）
• 如果没有登陆，就重定向到登陆页面，并且指定登陆成功后腰跳转的页面路径
• 将AuthRoute组件接收到的props原样传递给Route组件（保证与Route组件使用方式相同）
• 使用AuthRoute组件配置路由规则，验证是否实现页面的登陆访问控制

const AuthRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={props => {
        const isLogin = isAuth()

        if (isLogin) {
          // 已登录
          // 将 props 传递给组件，组件中才能获取到路由相关信息
          return <Component {...props} />
        } else {
          // 未登录
          return (
            <Redirect
              to={{
                pathname: '/login',
                state: {
                  from: props.location
                }
              }}
            />
          )
        }
      }}
    />
  )
}
export default AuthRoute

修改登录成功跳转

• 登陆成功后，判断是否需要跳转到用户想要访问的页面（判断props.location.state 是否有值）
• 如果不需要，则直接调用history.go(-1) 返回上一页
• 如果需要，就跳转到from.pathname 指定的页面（推荐使用replace方法模式，不是push）

 // 表单的提交事件
  handleSubmit: async (values, { props }) => {
    ...
    if (status === 200) {
      // 登录成功
      localStorage.setItem('hkzf_token', body.token)

      /* 
        1 登录成功后，判断是否需要跳转到用户想要访问的页面（判断 props.location.state 是否有值）。
        2 如果不需要（没有值），则直接调用 history.go(-1) 返回上一页。
        3 如果需要，就跳转到 from.pathname 指定的页面（推荐使用 replace 方法模式，而不是 push）。
      */
      if (!props.location.state) {
        // 此时，表示是直接进入到了该页面，直接调用 go(-1) 即可
        props.history.go(-1)
      } else {
        // replace: [home, map]
        props.history.replace(props.location.state.from.pathname)
      }
    } else {
      // 登录失败
      Toast.info(description, 2, null, false)
    }
  }