继续记录学习React项目的成果。

用户认证模块

简单的用户认证模块功能可以概括为：注册、登录、登出、token处理，额外功能可以从这些功能上进行拓展。

1. 创建auth模块。
   先定义User接口、baseUrl以及一些token操作：
   

   export interface User {
     id: string;
     name: string;
     email: string;
     title: string;
     organization: string;
     token: string;
   }

   const localStorageKey = "__auth_provider_token__";
   
   const apiUrl = process.env.REACT_APP_API_URL;
   
   export const getToken = () => window.localStorage.getItem(localStorageKey);

    

2. 定义响应处理函数
   该函数用于统一处理认证请求的响应，基本功能仅包括设置token：
   

   export const handleUserResponse = ({ user }: { user: User }) => {
     window.localStorage.setItem(localStorageKey, user.token || "");
     return user;
   };

3. login、register、logout
   登录与注册逻辑基本一致，即传入param，fetch调用接口，使用统一处理函数处理响应：
   

   export const login = (param: { username: string; password: string }) => {
     return fetch(`${apiUrl}/login`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify(param),
     }).then(async (res) => {
       const content = await res.json();
       if (res.ok) {
         return handleUserResponse(content);
       } else {
         return Promise.reject(content);
       }
     });
   };
   
   export const logout = async () => {
     window.localStorage.removeItem(localStorageKey);
   };

标签：const,string,用户,认证,token,export,模块,return,localStorageKey
来源： https://www.cnblogs.com/wananniannian/p/16672912.html