From 0b0263770837e9f7b00da7a48efea339e970e649 Mon Sep 17 00:00:00 2001 From: none Date: Thu, 2 Mar 2023 10:51:30 +0800 Subject: [PATCH] =?UTF-8?q?http=E5=B0=81=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.example | 1 + .gitignore | 7 +- src/api/categories.ts | 9 --- src/api/index.ts | 3 + src/api/internal/httpClient.ts | 124 +++++++++++++++++++++++++++++++++ src/api/login.ts | 19 +++++ src/index.tsx | 1 - src/pages/home/HomePage.tsx | 7 +- src/utils/axios.ts | 12 ---- src/utils/index.ts | 11 +++ 10 files changed, 170 insertions(+), 24 deletions(-) create mode 100644 .env.example delete mode 100644 src/api/categories.ts create mode 100644 src/api/index.ts create mode 100644 src/api/internal/httpClient.ts create mode 100644 src/api/login.ts delete mode 100644 src/utils/axios.ts create mode 100644 src/utils/index.ts diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..021a2cc --- /dev/null +++ b/.env.example @@ -0,0 +1 @@ +REACT_APP_URL= \ No newline at end of file diff --git a/.gitignore b/.gitignore index ac749bd..9664149 100644 --- a/.gitignore +++ b/.gitignore @@ -23,4 +23,9 @@ yarn-debug.log* yarn-error.log* yanr.lock -package-lock.json \ No newline at end of file +package-lock.json + +.env +.env.local +.env.production +.env.development \ No newline at end of file diff --git a/src/api/categories.ts b/src/api/categories.ts deleted file mode 100644 index 9e8e1b9..0000000 --- a/src/api/categories.ts +++ /dev/null @@ -1,9 +0,0 @@ -import axios from "axios"; - -export const getCategoriesAsync = (params: any) => - axios.get("/categroy/findCategroy", { - params: params, - }); - -export const addCategoriesAsync = (data: any) => - axios.post("/categroy/addCategroy", data); diff --git a/src/api/index.ts b/src/api/index.ts new file mode 100644 index 0000000..b224c91 --- /dev/null +++ b/src/api/index.ts @@ -0,0 +1,3 @@ +import * as login from "./login"; + +export {login} diff --git a/src/api/internal/httpClient.ts b/src/api/internal/httpClient.ts new file mode 100644 index 0000000..6a6e1ea --- /dev/null +++ b/src/api/internal/httpClient.ts @@ -0,0 +1,124 @@ +import axios, { Axios, AxiosResponse } from "axios"; +import { getToken, clearToken } from "../../utils/index"; + +export class HttpClient { + axios: Axios; + + constructor(url: string) { + this.axios = axios.create({ + baseURL: url, + timeout: 15000, + withCredentials: false, + }); + + //拦截器注册 + this.axios.interceptors.request.use( + (config) => { + const token = getToken(); + token && (config.headers.Authorization = "Bearer " + token); + return config; + }, + (err) => { + return Promise.reject(err); + } + ); + + this.axios.interceptors.response.use( + (response: AxiosResponse) => { + let status = response.data.status; //HTTP状态码 + let code = response.data.code; //业务返回代码 + + console.log("response", status, code); + + if (status === 200 && code === 0) { + return Promise.resolve(response); + } + + if (status === 401) { + clearToken(); + // 跳转到登录界面 + } else if (status === 404) { + // 跳转到404页面 + } else if (status === 403) { + // 跳转到无权限页面 + } else if (status === 500) { + // 跳转到500异常页面 + } + return Promise.reject(response); + }, + // 当http的状态码非0 + (error) => { + let httpCode = error.response.status; + if (httpCode === 401) { + //未登录 + clearToken(); + return; + } else if (httpCode === 403) { + //无权限 + return; + } + return Promise.reject(error.response); + } + ); + } + + get(url: string, params: object) { + return new Promise((resolve, reject) => { + this.axios + .get(url, { + params: params, + }) + .then((res) => { + resolve(res.data); + }) + .catch((err) => { + reject(err.data); + }); + }); + } + + destroy(url: string) { + return new Promise((resolve, reject) => { + this.axios + .delete(url) + .then((res) => { + resolve(res.data); + }) + .catch((err) => { + reject(err.data); + }); + }); + } + + post(url: string, params: object) { + return new Promise((resolve, reject) => { + this.axios + .post(url, params) + .then((res) => { + resolve(res.data); + }) + .catch((err) => { + reject(err.data); + }); + }); + } + + put(url: string, params: object) { + return new Promise((resolve, reject) => { + this.axios + .put(url, params) + .then((res) => { + resolve(res.data); + }) + .catch((err) => { + reject(err.data); + }); + }); + } +} + +const APP_URL = process.env.REACT_APP_URL || ""; + +const client = new HttpClient(APP_URL); + +export default client; diff --git a/src/api/login.ts b/src/api/login.ts new file mode 100644 index 0000000..ba3c0d3 --- /dev/null +++ b/src/api/login.ts @@ -0,0 +1,19 @@ +import client from "./internal/httpClient"; + +export function login( + email: string, + password: string, + captchaKey: string, + captchaVal: string +) { + return client.post("/backend/v1/auth/login", { + email: email, + password: password, + captcha_key: captchaKey, + captcha_val: captchaVal, + }); +} + +export function logout() { + return client.post("/backend/v1/auth/logout", {}); +} diff --git a/src/index.tsx b/src/index.tsx index c42b79d..ccbac81 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,7 +3,6 @@ import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; -import "./utils/axios"; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx index 95b0030..8afd14a 100644 --- a/src/pages/home/HomePage.tsx +++ b/src/pages/home/HomePage.tsx @@ -1,8 +1,13 @@ -import React from "react"; +import React, { useEffect } from "react"; import styles from "./HomePage.module.css"; import { Header, Footer } from "../../compenents"; +import { login } from "../../api/index"; export const HomePage: React.FC = () => { + useEffect(() => { + login.login("1@qq.com", "123123", "1", "2"); + }, []); + return ( <>
diff --git a/src/utils/axios.ts b/src/utils/axios.ts deleted file mode 100644 index fe163b2..0000000 --- a/src/utils/axios.ts +++ /dev/null @@ -1,12 +0,0 @@ -import axios from "axios"; - -axios.defaults.timeout = 10000; -axios.defaults.headers.Authorization = "Bearer "; -axios.defaults.headers.common["meedu-platform"] = "backend"; -axios.defaults.baseURL = "https://dev-local.meedu.vip/"; - -// 响应拦截器 -axios.interceptors.response.use( - (res) => res.data, // 拦截到响应对象，将响应对象的 data 属性返回给调用的地方 - (err) => Promise.reject(err) -); diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 0000000..83b5f14 --- /dev/null +++ b/src/utils/index.ts @@ -0,0 +1,11 @@ +export function getToken(): string { + return window.localStorage.getItem("playedu-backend-token") || ""; +} + +export function setToken(token: string) { + window.localStorage.setItem("playedu-backend-token", token); +} + +export function clearToken() { + window.localStorage.removeItem("playedu-backend-token"); + }