简单的用户认证模块

2022-09-09 16:02:14 阅读：189 来源： 互联网

标签：const string 用户认证 token export 模块 return localStorageKey

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

用户认证模块

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

创建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);

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

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

简单的用户认证模块

用户认证模块