react-check-auth 使用教程

react-check-auth 使用教程

项目介绍

react-check-auth 是一个用于在 React 或 React Native 应用中进行声明式身份验证检查的小型组件。它利用 React 16 的新 Context API，代码量仅约 100 行。该组件可以作为熟悉 Context API 的入门示例，帮助开发者在渲染前进行身份验证检查。

项目快速启动

安装

首先，通过 npm 或 yarn 安装 react-check-auth：

npm install react-check-auth
# 或者
yarn add react-check-auth

基本使用

1. 引入组件：

import React from 'react';
import ReactDOM from 'react-dom';
import { AuthProvider, AuthConsumer } from 'react-check-auth';

2. 配置 AuthProvider：

const authUrl = 'https://my-backend.com/verifyAuth';

const App = () => (
  <AuthProvider authUrl={authUrl}>
    <Main />
  </AuthProvider>
);

3. 使用 AuthConsumer：

const Main = () => (
  <Router>
    <Route path='/home' component={Home} />
    <Route path='/login' component={Login} />
  </Router>
);

const Home = () => {
  return (
    <AuthConsumer>
      {({ userInfo }) => {
        if (!userInfo) {
          return <Redirect to='/login' />;
        }
        return <div>Welcome Home</div>;
      }}
    </AuthConsumer>
  );
};

应用案例和最佳实践

案例1：使用 GET 端点

import React from 'react';
import { AuthProvider } from 'react-check-auth';

const authUrl = 'https://my-backend.com/verifyAuth';
const reqOptions = {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + window.localStorage.myAuthToken
  }
};

const App = () => (
  <AuthProvider authUrl={authUrl} reqOptions={reqOptions}>
    <Main />
  </AuthProvider>
);

案例2：使用 POST 端点

import React from 'react';
import { AuthProvider } from 'react-check-auth';

const authUrl = 'https://my-backend.com/verifyAuth';
const reqOptions = () => ({
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + window.localStorage.myAuthToken
  }
});

const App = () => (
  <AuthProvider authUrl={authUrl} reqOptions={reqOptions}>
    <Main />
  </AuthProvider>
);

典型生态项目

react-check-auth 可以与其他声明式组件（如路由组件）结合使用，以实现更复杂的身份验证逻辑。例如，结合 react-router 进行路由级别的身份验证检查。

import { AuthConsumer } from 'react-check-auth';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';

const Main = () => (
  <Router>
    <Route path='/home' component={Home} />
    <Route path='/login' component={Login} />
  </Router>
);

const Home = () => {
  return (
    <AuthConsumer>
      {({ userInfo }) => {
        if (!userInfo) {
          return <Redirect to='/login' />;
        }
        return <div>Welcome Home</div>;
      }}
    </AuthConsumer>
  );
};

通过这种方式，可以在应用的各个部分进行细粒度的身份验证控制，确保只有经过身份验证的用户才能访问特定资源。