验证 React com Context API 和 Hooks

什么是 Context API？

创建新项目

上下文创建

附加功能

什么是 Context API？

一个 Context API，用于管理所有组件的操作，以及所有操作中的操作手册。 Algo como o que o Redux faz criando e gerenciando um estado global, Included o prio Redux utiliza Context API por debaixo dos panos.

可以使用该功能和使用简单的操作底座的项目，来验证在嵌套柱上的使用情况。

创建新项目

首先开始编写 ReactJS com Typescript 文档（在教程中使用 Typescript 并忽略其提示），然后在终端上执行命令：



$ npx create-react-app authapp --template typescript

com o projeto criado e aberto no seu editor prereferido vamos começar apagando todos os arquivos que o React criaautomaticamente, ficando com a seguinte estrutura:

Lembre-se de apagar 作为 linhas de código que dependentiam dos arquivos deletados！

Agora vamos 安装了 uma lib 和激光雷达 com 作为旋转应用程序，并提供了使用React Router 的教程。后续命令的安装步骤：



$ yarn add react-router-dom

使用 Typescript 和 mim，可以精确安装该库中的类型定义，这些定义取决于命令的开发步骤：



$ yarn add @types/react-router-dom -D

应用程序页面

您可以继续安装 Podemos，然后在 2个意大利面以外的地方使用意大利面，并src在其中添加一个应用程序页面。 Por enquanto estamos assim:pagesLoginHomeindex.tsx

您可以快速阅读教程，然后将其作为页面进行操作，很快就能完成！ Em nossa página Home vamos criar um componente contro somente um h1com o nome da página:



import React from 'react';

const Home: React.FC = () => {
 return (
   <div>
     <h1>Home</h1>
   </div>
 );
};

export default Home;

在登录页面，您可以通过以下方式获得响应：



import React from 'react';

const Login: React.FC = () => {
 function handleLogin() {}

 return (
   <div>
     <button onClick={handleLogin}>Login</button>
   </div>
 );
};

export default Login;

应用列表

com 作为页面，vamos agora criar 作为 rotas da nossa aplicação。最初的 vamos crariar，dentro de src，uma 意大利面routesonde vamos crariar os que serão nossa rotas。

请参阅本教程，以了解如何使用您的身份验证功能，例如登录、注册等，以及如何使用您的身份验证功能。 Ficando com a seguinte estrutura：

无需在登录页面上SignRoutes.tsx查看 React Router 的文档。



import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';

import Login from '../pages/Login';

const SignRoutes: React.FC = () => {
 return (
   <BrowserRouter>
     <Route path="/" component={Login} />
   </BrowserRouter>
 );
};

export default SignRoutes;

Vamos fazer o mesmo para nosso OtherRoutes.tsxmas dessa vez utilizando nossa página 主页：



import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';

import Home from '../pages/Home';

const OtherRoutes: React.FC = () => {
 return (
   <BrowserRouter>
     <Route path="/" component={Home} />
   </BrowserRouter>
 );
};

export default OtherRoutes;

Agora em nosso index.tsx, ainda na pasta, routesvamos importar nossas rotas e por enquanto retornar somente nossa rota de Login:



import React from 'react';

import SignRoutes from './SignRoutes';
import OtherRoutes from './OtherRoutes';

const Routes: React.FC = () => {
 return <SignRoutes />;
};

export default Routes;

Agora em nosso App.tsxna raiz do nosso projeto importaremos nossas Rotas, assim：



import React from 'react';
import Routes from './routes';

function App() {
 return <Routes />;
}

export default App;

如果您不想yarn start使用终端机，请登录登录页面：

上下文创建

作为即将到来的应用程序的基础，我们可以使用 React 上下文来了解“全局”和真实性。 Para isso dentro do nosso srcvamos criar uma Pasta contextscom um arquivo auth.tsx:

auth.tsxReact 的重要内容createContext和各种变量的导出内容，以及相关的上下文AuthContext：



import React, { createContext } from 'react';

const AuthContext = createContext({});

export default AuthContext;

Em nosso App.tsxvamos importar esse AuthContexte circundar nossas rotas com o Provider do nosso Contexto passando uma propriedade valuecom um object contro signed: true, da seguinte forma:



import AuthContext from './contexts/auth';

function App() {
 return (
   <AuthContext.Provider value={{signed: true}}>
     <Routes />
   </AuthContext.Provider>
 );
}

Agora se em nossa página de Login Buscarmos esse Contexto e dermos um console.log Teremos a seguinte resposta:



import React, { useContext } from 'react';
import AuthContext from '../../contexts/auth';

const Login: React.FC = () => {
 const context = useContext(AuthContext);

 console.log(context);
...

控制台日志：

您已签署了envado nosso App.tsx pode ser recuperado dentro do nosso componente！

Criando 提供商

重要的是，它是激光雷达的上下文和实现工具，也是激光雷达的验证工具，也是我们的auth.tsx出口设备的提供者。



const AuthContext = createContext({});
...
export const AuthProvider: React.FC = ({ children }) => {
 return (
   <AuthContext.Provider value={{ signed: true }}>
     {children}
   </AuthContext.Provider>
 );
};
...
export default AuthContext;

Agora Podemos 重要的供应商、主要功能或App.tsx功能的改变：



...
import { AuthProvider } from './contexts/auth';

function App() {
 return (
   <AuthProvider>
     <Routes />
   </AuthProvider>
 );
}
...

Fazendo 作为 API

使用Axios来实现 API 的要求。请安装 axios 包：



yarn add axios

Vamos criar uma 面食services和 arquivo api.tspara configurar o axios：



import axios from 'axios';

const api = axios.create({
 baseURL: 'https://localhost:3333',
});

export default api;

com o axios configurado vamos criar uma função para fazer a chamada a api dentro do nosso arquivo auth.tsx：



...
import api from '../services/api';
...
export const AuthProvider: React.FC = ({ children }) => {
...
async function Login() {
   const response = await api.post('/login', {
     email: 'example@email.com',
     password: '123456',
   });

   console.log(response);
 }
...

提供程序的其他组件的功能和附加值：



return (
   <AuthContext.Provider value={{ signed: true, Login }}>
...

Criaremos também uma 界面可提供任何价值和帮助或提示或上下文：



interface AuthContextData {
 signed: boolean;
 Login(): Promise<void>;
}

const AuthContext = createContext<AuthContextData>({} as AuthContextData);

任何登录方式都不需要登录和实现登录：



...
function handleLogin() {
   context.Login();
}
...

Agora 没有登录功能，可响应登录请求，并确认控制台.log 中显示的内容：

Precisamos Guardar os bados retornados pela API 和 algum lugar，para isso vamos criar um estado para nossouser和 vamos adicionar nosso tokenno header das nossas chamadas pelo axios：



...
  const [user, setUser] = useState<object | null>(null);
...
  async function Login() {
...
   setUser(response.data.user);
   api.defaults.headers.Authorization = `Bearer ${response.data.token}`
...

用户可以通过提供者和用户签署相关信息：



...
return (
   <AuthContext.Provider value={{ signed: Boolean(user), user, Login }}>
     {children}
   </AuthContext.Provider>
 );
...

使用打字稿的用户界面的使用说明AuthContextData：



interface AuthContextData {
  signed: boolean;
  user: object | null;
  Login(): Promise<void>;
}

修改为 Rotas

最后，我们将讨论如何轮换index.tsx或使用哪些轮换：



import React, { useContext } from 'react';
import AuthContext from '../contexts/auth';

import SignRoutes from './SignRoutes';
import OtherRoutes from './OtherRoutes';

const Routes: React.FC = () => {
 const { signed } = useContext(AuthContext);

 return signed ? <OtherRoutes /> : <SignRoutes />;
};

export default Routes;

很快，您就可以登录并查看功能并登录主页！

创建钩子 useAuth

Podemos criar um hook individualizado para facilitar or uso do nosso contexto, para isso vamos exportar uma função chamada useAuth do nosso arquivo auth.tsx, que cria nosso contexto com useContext, e remover nosso export default de AuthContext:



export function useAuth(){
 const context = useContext(AuthContext);

 return context;
}

Agora Podemos mudar nas rotas 和 nossa página de Login onde utilizamos useContext(AuthContext)para:



import { useAuth } from '../../contexts/auth';
...
 const context = useAuth();
...

最后，我们将确保您的真实性！

附加功能

无需存储

正常使用时请注意以下事项user。token可以使用 SessionStorage 或 LocalStorage、Web、AsyncStorage或 React Native。

登录的功能如下auth.tsx：



async function Login(){
...

  localStorage.setItem('@App:user', JSON.stringify(response.data.user));
  localStorage.setItem('@App:token', response.data.token);
}
...

恢复效果如下AuthProvider：



...
export const AuthProvider: React.FC = ({ children }) => {
...

useEffect(() => {
    const storagedUser = localStorage.getItem('@App:user');
    const storagedToken = localStorage.getItem('@App:token');

    if (storagedToken && storagedUser) {
      setUser(JSON.parse(storagedUser));
      api.defaults.headers.Authorization = `Bearer ${storagedToken}`;
    }
  }, []);
...

注销功能

如果没有 localStorage，则无法注销应用程序，因此无法使用 Provider 来auth.tsx删除本地存储中的项目：



...
interface AuthContextData {
  signed: boolean;
  user: object | null;
  Login(user: object): Promise<void>;
  Logout(): void;
}
...
export const AuthProvider: React.FC = ({ children }) => {
...
  function Logout() {
    setUser(null);

    sessionStorage.removeItem('@App:user');
    sessionStorage.removeItem('App:token');
  }

  return (
    <AuthContext.Provider
      value={{ signed: Boolean(user), user, Login, Logout }}
    >
      {children}
    </AuthContext.Provider>
  );
...

在主页上可以看到主页和应用程序的注销功能：



const Home: React.FC = () => {
  const { Logout } = useAuth();

  async function handleLogout() {
    Logout();
  }

  return (
    <div>
      <h1>Home</h1>
      <button onClick={handleLogout}>Logout</button>
    </div>
  );
};

启动复杂的程序后，我们就可以轻松完成 Redux 和功能！ O que achou？

与 Github 相关的所有操作：https://github.com/rafacdomin/Auth-React-ContextAPI

字体：https://www.youtube.com/watch?v= KISMYYXSIX8

文章来源：https://dev.to/rafacdomin/autenticacao-no-react-com-context-api-e-hooks-4bia

是否可以验证 React 的 Context API 和 Hooks 是否有 Context API？ Criando novo projeto Criando Contexto Extras

验证 React com Context API 和 Hooks

什么是 Context API？

创建新项目

上下文创建

附加功能

什么是 Context API？

创建新项目

应用程序页面

应用列表

上下文创建

Criando 提供商

Fazendo 作为 API

修改为 Rotas

创建钩子 useAuth

附加功能

无需存储

注销功能