Skip to content

E
eppfax-h5-react
Commit 4933c6d2 by HoMeTown
Options

feat: eslint config

parent 5b9c2099
Showing with 251 additions and 195 deletions
.eslintignore 0 → 100644
node_modules
dist
\ No newline at end of file
.eslintrc.js 0 → 100644
module.exports = {
parser: '@typescript-eslint/parser',
extends: [
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended'
], //使用推荐的React代码检测规范
plugins: ['@typescript-eslint'],
env:{
browser: true,
node: true,
},
settings: { //自动发现React的版本，从而进行规范react代码
"react": {
"pragma": "React",
"version": "detect"
}
},
parserOptions: { //指定ESLint可以解析JSX语法
"ecmaVersion": 2019,
"sourceType": 'module',
"ecmaFeatures":{
jsx:true
}
},
rules: {
// 自定义的React规范
"react/react-in-jsx-scope": "off"
}
}
\ No newline at end of file
README.md
......@@ -37,3 +37,8 @@ deploy test
```bash
pnpm run deploy:test
```
lint code
```bash
pnpm lint
```
\ No newline at end of file
package.json
......@@ -10,6 +10,7 @@
"build:dev": "rsbuild build --config rsbuild/build/build.dev.ts",
"build:prod": "rsbuild build --config rsbuild/build/build.prod.ts",
"deploy:test": "pnpm build:test && sh ./scripts/deploy.test.sh",
"lint": "eslint src --fix --ext .ts,.tsx",
"build": "rsbuild build",
"preview": "rsbuild preview"
},
......@@ -28,7 +29,16 @@
"@types/lodash": "^4.14.202",
"@types/react": "^18",
"@types/react-dom": "^18",
"@typescript-eslint/eslint-plugin": "^6.13.1",
"@typescript-eslint/parser": "^6.13.1",
"eslint": "^8.54.0",
"eslint-plugin-react": "^7.33.2",
"postcss-px-to-viewport": "^1.1.1",
"typescript": "^5.3.0"
"typescript": "^5.3.2"
},
"husky": {
"hooks": {
"pre-commit": "pnpm lint"
}
}
}
rsbuild/build/build.base.ts
import { type RsbuildConfig as BaseRsbuildConfig } from '@rsbuild/shared';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginImageCompress } from '@rsbuild/plugin-image-compress';
import { CSS_MODULES_LOCAL_IDENT_NAME, HTML_TEMPLATE_CONFIG } from '../config'
import { postcssPxToViewportCreator } from '../plugins'
......
rsbuild/build/build.dev.ts
......@@ -6,7 +6,7 @@ import {ENV_CONFIG, ENV_DEV} from "../config";
function defineConfigCreator(): BaseRsbuildConfig {
const devEnvConfig = ENV_CONFIG[ENV_DEV];
for (let prodEnvConfigKey in devEnvConfig) {
for (const prodEnvConfigKey in devEnvConfig) {
process.env[prodEnvConfigKey] = devEnvConfig[prodEnvConfigKey as keyof typeof devEnvConfig]
}
......
rsbuild/build/build.prod.ts
......@@ -6,7 +6,7 @@ import {ENV_CONFIG, ENV_PROD} from "../config";
function defineConfigCreator(): BaseRsbuildConfig {
const prodEnvConfig = ENV_CONFIG[ENV_PROD];
for (let prodEnvConfigKey in prodEnvConfig) {
for (const prodEnvConfigKey in prodEnvConfig) {
process.env[prodEnvConfigKey] = prodEnvConfig[prodEnvConfigKey as keyof typeof prodEnvConfig]
}
......
rsbuild/build/build.test.ts
......@@ -6,7 +6,7 @@ import {ENV_CONFIG, ENV_TEST} from "../config";
function defineConfigCreator(): BaseRsbuildConfig {
const testEnvConfig = ENV_CONFIG[ENV_TEST];
for (let prodEnvConfigKey in testEnvConfig) {
for (const prodEnvConfigKey in testEnvConfig) {
process.env[prodEnvConfigKey] = testEnvConfig[prodEnvConfigKey as keyof typeof testEnvConfig]
}
......
src/App.tsx
import styles from './App.module.scss'
import testImg from '@/assets/images/notGetStatus.png'
import {useNavigate} from "react-router-dom";
import { useNavigate } from 'react-router-dom'
const App = () => {
const navigate = useNavigate()
function handleClick() {
navigate("/testdemo?id=1234", {
const handleClick = () => {
navigate('/testdemo?id=1234', {
state: {
id: 1234567
}
......@@ -18,7 +18,7 @@ const App = () => {
<img className={styles.testBoxImg} src={testImg} alt=""/>
</div>
</div>
);
};
)
}
export default App;
export default App
src/apis/common.ts
import axiosInstance from '@/utils/axios'
/**
* 获取登录地址
*/
export const getLoginUrl = async (): Promise<BackendResponse<any>> => {
const response = await axiosInstance.get<BackendResponse<LoginResponseData>>('/api/login/get_login_url');
export const getLoginUrl = async (): Promise<BackendResponse<string>> => {
try {
const response = await axiosInstance.get<BackendResponse<string>>('/api/login/get_login_url')
return response.data
} catch (error) {
throw error
}
}
interface LoginRequestData {
code: string;
state: string;
amp: string;
code: string
state: string
amp: string
}
interface LoginResponseData {
token: string;
token: string
}
/**
......@@ -26,56 +27,51 @@ interface LoginResponseData {
* @param requestData
*/
export const login = async (requestData: LoginRequestData): Promise<BackendResponse<LoginResponseData>> => {
const response = await axiosInstance.post<BackendResponse<LoginResponseData>>('/api/login/authorize', requestData);
return response.data;
try {
const response = await axiosInstance.post<BackendResponse<LoginResponseData>>('/api/login/authorize', requestData)
return response.data
} catch (error) {
throw error
}
}
interface QueryUserOrderResponse {
orderId: string;
lotteryOrderId: string;
orderId: string
lotteryOrderId: string
}
export const queryUserOrder = async (): Promise<BackendResponse<QueryUserOrderResponse>> => {
try {
const response = await axiosInstance.get<BackendResponse<QueryUserOrderResponse>>('/api/order/getUserOrder')
return response.data
}
/**
* 查询产品列表
*/
export const queryProductList = async (): Promise<BackendResponse<any>> => {
const response = await axiosInstance.get<BackendResponse<any>>('/api/product/query_list');
return response.data
}
/**
* 获取首页配置信息
*/
export const queryHomeConfig = async (): Promise<BackendResponse<any>> => {
const response = await axiosInstance.get<BackendResponse<any>>('/api/common/config/query_home_config');
return response.data
} catch (error) {
throw error
}
}
export interface QueryBranchListResponseData {
branchCode: string;
branchName: string;
showOrder: 1;
branchCode: string
branchName: string
showOrder: 1
}
/**
* 获取网点列表
*/
export const queryBranchList = async (): Promise<BackendResponse<QueryBranchListResponseData[]>> => {
const response = await axiosInstance.get<BackendResponse<QueryBranchListResponseData[]>>('/api/branch/query_list');
try {
const response = await axiosInstance.get<BackendResponse<QueryBranchListResponseData[]>>('/api/branch/query_list')
return response.data
} catch (error) {
throw error
}
}
export interface CreateOrderRequestData {
branchName: string;
branchCode: string;
productCode: string;
number: number;
branchName: string
branchCode: string
productCode: string
number: number
}
/**
......@@ -83,8 +79,12 @@ export interface CreateOrderRequestData {
* @param requestData
*/
export const createOrder = async (requestData: CreateOrderRequestData): Promise<BackendResponse<string>> => {
const response = await axiosInstance.post<BackendResponse<string>>('/api/order/create_order', requestData);
try {
const response = await axiosInstance.post<BackendResponse<string>>('/api/order/create_order', requestData)
return response.data
}catch (error) {
throw error;
}
}
interface GetPayUrlRequestData {
......@@ -96,34 +96,43 @@ interface GetPayUrlRequestData {
* @param requestData
*/
export const queryPayUrl = async (requestData: GetPayUrlRequestData): Promise<BackendResponse<string>> => {
const response = await axiosInstance.post<BackendResponse<string>>('/api/pay', requestData);
try {
const response = await axiosInstance.post<BackendResponse<string>>('/api/pay', requestData)
return response.data
} catch (error) {
throw error;
}
}
/**
* 查询支付配置
*/
export const queryPayConfig = async (): Promise<BackendResponse<any>> => {
const response = await axiosInstance.get<BackendResponse<any>>('/api/pay/pay_config');
return response.data
export const queryPayConfig = async <T>(): Promise<BackendResponse<T>> => {
try {
const response = await axiosInstance.get<BackendResponse<T>>('/api/pay/pay_config');
return response.data;
} catch (error) {
throw error;
}
}
interface QueryOrderInfoResponseOrderDetail {
branchCode: string;
branchName: string;
mobile: string;
orderAmount: string;
payStatus: string;
payTime: string;
branchCode: string
branchName: string
mobile: string
orderAmount: string
payStatus: string
payTime: string
}
interface QueryOrderInfoResponseProductDetailInfo {
productCode: string;
productName: string;
productCode: string
productName: string
}
export interface QueryOrderInfoResponse {
orderDetail: QueryOrderInfoResponseOrderDetail;
orderDetail: QueryOrderInfoResponseOrderDetail
productDetailInfo: QueryOrderInfoResponseProductDetailInfo
}
......@@ -131,7 +140,11 @@ export interface QueryOrderInfoResponse {
* 查询订单详情
* @param orderId
*/
export const queryOrderInfo = async (orderId: string):Promise<BackendResponse<any>> => {
const response = await axiosInstance.get<BackendResponse<any>>(`/api/order/detail/${orderId}`)
export const queryOrderInfo = async (orderId: string): Promise<BackendResponse<QueryOrderInfoResponse>> => {
try {
const response = await axiosInstance.get<BackendResponse<QueryOrderInfoResponse>>(`/api/order/detail/${orderId}`)
return response.data
} catch (error) {
throw error
}
}
src/env.d.ts
/// <reference types="@rsbuild/core/types" />
interface Window {
AlipayJSBridge: Record<string, any>
interface Window <T>{
AlipayJSBridge: Record<string, T>
}
src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from "@/pages/Home";
import Lottery from "@/pages/Lottery";
import OrderDetail from "@/pages/OrderDetail";
import './styles/reset.css';
import './styles/nut-var.css';
import Home from '@/pages/Home'
import Lottery from '@/pages/Lottery'
import OrderDetail from '@/pages/OrderDetail'
import './styles/reset.css'
import './styles/nut-var.css'
import '@nutui/nutui-react/dist/style.css'
const root = ReactDOM.createRoot(document.getElementById('root')!);
const root = ReactDOM.createRoot(document.getElementById('root')!)
root.render(
<React.StrictMode>
<BrowserRouter>
......@@ -18,5 +18,5 @@ root.render(
<Route path = '/orderDetail' element={<OrderDetail />}></Route>
</Routes>
</BrowserRouter>
</React.StrictMode>,
);
</React.StrictMode>
)
src/pages/Home/components/HomeBg.tsx
import React from "react";
import styles from "@/pages/Home/index.module.scss";
import homeTopBannerImg from "@/assets/images/homeTopBanner.png";
import homeBotBannerImg from "@/assets/images/homeBotBanner.png";
import React from 'react'
import styles from '@/pages/Home/index.module.scss'
import homeTopBannerImg from '@/assets/images/homeTopBanner.png'
import homeBotBannerImg from '@/assets/images/homeBotBanner.png'
const HomeBg: React.FC = () => {
return (
......
src/pages/Home/components/HomeContent.tsx
import React, {useEffect, useState} from "react";
import homeProductBanner1Img from "@/assets/images/homeProductBanner1.png";
import homeProductBanner2Img from "@/assets/images/homeProductBanner2.png";
import styles from "@/pages/Home/index.module.scss";
import HomeProductItem from "@/pages/Home/components/HomeProductItem";
import { Overlay, Popup, Toast } from "@nutui/nutui-react";
import homeRulesOverlayCloseImg from "@/assets/images/homeRulesOverlayClose.png";
import HomeRuleContent from "@/pages/Home/components/HomeRuleContent";
import apis from "@/apis";
import {type QueryBranchListResponseData} from '@/apis/common'
import OrderHelper from "@/pages/Home/helper/order";
import React, { useEffect, useState } from 'react'
import homeProductBanner1Img from '@/assets/images/homeProductBanner1.png'
import homeProductBanner2Img from '@/assets/images/homeProductBanner2.png'
import styles from '@/pages/Home/index.module.scss'
import HomeProductItem from '@/pages/Home/components/HomeProductItem'
import { Overlay, Popup, Toast } from '@nutui/nutui-react'
import homeRulesOverlayCloseImg from '@/assets/images/homeRulesOverlayClose.png'
import HomeRuleContent from '@/pages/Home/components/HomeRuleContent'
import apis from '@/apis'
import { type QueryBranchListResponseData } from '@/apis/common'
import OrderHelper from '@/pages/Home/helper/order'
const HomeContent: React.FC = () => {
const [productList] = useState([
{ bannerImg: homeProductBanner1Img, title: '厅堂实物 1元购', buttonTextColor: '#F41E71', productCode: '4'},
{ bannerImg: homeProductBanner2Img, title: '微信立减金等你来拿', buttonTextColor: '#1FA189', productCode: '5'},
{ bannerImg: homeProductBanner1Img, title: '厅堂实物 1元购', buttonTextColor: '#F41E71', productCode: '4' },
{ bannerImg: homeProductBanner2Img, title: '微信立减金等你来拿', buttonTextColor: '#1FA189', productCode: '5' }
])
const [branchList, setBranchList] = useState<QueryBranchListResponseData[]>([])
......@@ -28,18 +28,17 @@ const HomeContent: React.FC = () => {
const [toasted, setToasted] = useState(false)
function handleClickProduct(idx: number) {
if(toasted) {
function handleClickProduct (idx: number) {
if (toasted) {
setActiveProductIdx(idx)
setShowBranchListPopup(true)
} else {
Toast.show('请在网点工作人员指导下购买，每人仅有一次活动参与机会');
Toast.show('请在网点工作人员指导下购买，每人仅有一次活动参与机会')
setToasted(true)
}
}
function handleConfirm() {
function handleConfirm () {
OrderHelper.submitOrder({
branchName: branchList[activeBranchIdx].branchName,
branchCode: branchList[activeBranchIdx].branchCode,
......@@ -50,7 +49,7 @@ const HomeContent: React.FC = () => {
useEffect(() => {
apis.common.queryBranchList().then(res => {
if(res.ok) {
if (res.ok) {
setBranchList(res.data)
}
})
......@@ -72,7 +71,7 @@ const HomeContent: React.FC = () => {
})}
<div className={styles.productTips}>活动最终解释权归本行所有</div>
{/*网点列表*/}
{/* 网点列表 */}
<Popup
visible={ showBranchListPopup }
position="bottom"
......@@ -82,8 +81,8 @@ const HomeContent: React.FC = () => {
<div className={styles.branchListPopupWrap}>
<div className={styles.branchListPopupHeader}>
<div className={styles.branchListPopupHeaderCancel} onClick={() => {
setShowBranchListPopup(false);
setActiveBranchIdx(-1);
setShowBranchListPopup(false)
setActiveBranchIdx(-1)
}}>取消</div>
<div className={styles.branchListPopupHeaderTitle}>选择营业网点</div>
<div className={styles.branchListPopupHeaderConfirm} onClick={handleConfirm}>确定</div>
......@@ -93,7 +92,7 @@ const HomeContent: React.FC = () => {
return (
<div
className={styles.branchListItem}
onClick={() => setActiveBranchIdx(index)}
onClick={() => { setActiveBranchIdx(index) }}
key={item.branchCode}
style={{
color: activeBranchIdx === index ? '#e64545' : '',
......@@ -107,24 +106,23 @@ const HomeContent: React.FC = () => {
</div>
</div>
</Popup>
{/*网点列表*/}
{/* 网点列表 */}
{/*活动规则*/}
<div className={styles.contentRulesButton} onClick={() => setRulesOverlayVisible(true)}>活动规则</div>
{/* 活动规则 */}
<div className={styles.contentRulesButton} onClick={() => { setRulesOverlayVisible(true) }}>活动规则</div>
<Overlay
visible={rulesOverlayVisible}
closeOnOverlayClick={false}
onClick={() => setRulesOverlayVisible(false)}
onClick={() => { setRulesOverlayVisible(false) }}
>
<div className={styles.rulesOverlayWrap}>
<div className={styles.rulesOverlayContent}>
<img className={styles.rulesOverlayCloseImg} src={homeRulesOverlayCloseImg} onClick={() => setRulesOverlayVisible(false)} alt=""/>
<img className={styles.rulesOverlayCloseImg} src={homeRulesOverlayCloseImg} onClick={() => { setRulesOverlayVisible(false) }} alt=""/>
<HomeRuleContent />
</div>
</div>
</Overlay>
{/*活动规则*/}
{/* 活动规则 */}
</div>
)
......
src/pages/Home/components/HomeProductItem.tsx
import React from "react";
import styles from "@/pages/Home/index.module.scss";
import React from 'react'
import styles from '@/pages/Home/index.module.scss'
interface HomeProductItemProps {
/**
* 背景图
*/
bannerImg: string;
bannerImg: string
/**
* 标题
*/
title: string;
title: string
/**
* 按钮文字
*/
buttonText?: string;
buttonText?: string
/**
* 按钮文字颜色
*/
buttonTextColor: string;
buttonTextColor: string
/**
* 点击
*/
......@@ -34,7 +34,7 @@ const HomeProductItem: React.FC<HomeProductItemProps> = (props) => {
<div className={styles.productItem}>
<img className={styles.productItemBg} src={props.bannerImg} alt={props.title}/>
<h3 className={styles.productItemTitle}>{ props.title }</h3>
<div className={styles.productItemButton} style={buttonStyle} onClick={() => props.onButtonClick(props.idx)}>{ props.buttonText || '立即购买' }</div>
<div className={styles.productItemButton} style={buttonStyle} onClick={() => { props.onButtonClick(props.idx) }}>{ props.buttonText || '立即购买' }</div>
</div>
)
}
......
src/pages/Home/components/HomeRuleContent.tsx
import React from "react";
import styles from "@/pages/Home/index.module.scss";
import React from 'react'
import styles from '@/pages/Home/index.module.scss'
const HomeRuleContent: React.FC = () => {
return (
......
src/pages/Home/helper/order.ts
import apis from "@/apis";
import {type CreateOrderRequestData, queryUserOrder} from '@/apis/common'
import SessionStorageUtil from "@/utils/session";
import { type NavigateFunction } from "react-router-dom";
import apis from '@/apis'
import { type CreateOrderRequestData } from '@/apis/common'
import { type NavigateFunction } from 'react-router-dom'
class OrderHelper {
/**
......@@ -12,30 +11,30 @@ class OrderHelper {
* 4. 唤起app支付
* @param params CreateOrderRequestData
*/
static async submitOrder(params: CreateOrderRequestData) {
static async submitOrder (params: CreateOrderRequestData) {
const createOrderRes = await apis.common.createOrder(params)
const queryPayUrlRes = await apis.common.queryPayUrl({orderId: createOrderRes.data})
const queryPayUrlRes = await apis.common.queryPayUrl({ orderId: createOrderRes.data })
const tokenId = queryPayUrlRes.data.split('=')[1]
const queryPayConfigRes = await apis.common.queryPayConfig()
const queryPayConfigRes = await apis.common.queryPayConfig<Record<'param', Record<string, string>>>()
const data = queryPayConfigRes.data
data.param.tokenId = tokenId
window.AlipayJSBridge.call("startApp", data, function (result: string) {
console.log(result, "支付结果");
});
window.AlipayJSBridge.call('startApp', data, function (result: string) {
console.log(result, '支付结果')
})
}
/**
* 获取用户的订单
*/
static async queryUserOrder(navigate: NavigateFunction) {
static async queryUserOrder (navigate: NavigateFunction) {
const res = await apis.common.queryUserOrder()
if(res.ok) {
if(res.data?.lotteryOrderId) {
if (res.ok) {
if (res.data?.lotteryOrderId) {
navigate(`/lottery?lotteryOrderId=${res.data.lotteryOrderId}`, {
replace: true
})
}
if(res.data?.orderId) {
if (res.data?.orderId) {
navigate(`/orderDetail?orderId=${res.data.orderId}`, {
replace: true
})
......
src/pages/Home/index.tsx
import React, {useEffect, useState} from "react";
import React, { useEffect, useState } from 'react'
import styles from './index.module.scss'
import {useNavigate, useSearchParams} from "react-router-dom";
import HomeBg from "@/pages/Home/components/HomeBg";
import HomeContent from "@/pages/Home/components/HomeContent";
import AuthUtil from "@/utils/auth";
import OrderHelper from "@/pages/Home/helper/order";
import { useNavigate, useSearchParams } from 'react-router-dom'
import HomeBg from '@/pages/Home/components/HomeBg'
import HomeContent from '@/pages/Home/components/HomeContent'
import AuthUtil from '@/utils/auth'
import OrderHelper from '@/pages/Home/helper/order'
const Home: React.FC = () => {
const [params] = useSearchParams()
const navigate = useNavigate()
const [isAuthed, setIsAuthed] = useState(false)
useEffect( () => {
useEffect(() => {
AuthUtil.auth(params)
.then(res => {
OrderHelper.queryUserOrder(navigate).then(_ => {
OrderHelper.queryUserOrder(navigate).then(() => {
setIsAuthed(res)
})
})
}, []);
}, [])
return (
<div className={styles.wrap}>
......
src/pages/Lottery/index.tsx
import React from "react";
import React from 'react'
const Lottery: React.FC = () => {
return (
......
src/pages/OrderDetail/index.tsx
import React, {useEffect, useState} from "react";
import {useSearchParams} from "react-router-dom";
import apis from "@/apis";
import React, { useEffect, useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import apis from '@/apis'
import { type QueryOrderInfoResponse } from '@/apis/common'
import styles from './index.module.scss'
import { Divider, Skeleton } from '@nutui/nutui-react';
import { Divider, Skeleton } from '@nutui/nutui-react'
const OrderDetail: React.FC = () => {
const [params] = useSearchParams()
......@@ -14,7 +14,7 @@ const OrderDetail: React.FC = () => {
console.log(params.get('orderId'))
apis.common.queryOrderInfo(params.get('orderId') || '').then(res => {
console.log(res.data)
if(res.ok) {
if (res.ok) {
setOrderInfo(res.data)
setChecked(true)
}
......
src/typings/axios.d.ts
interface BackendResponse<T> {
code: number;
msg: string;
ok: boolean;
data: T;
code: number
msg: string
ok: boolean
data: T
}
src/utils/auth.ts
import { type NavigateFunction} from "react-router-dom";
import apis from '@/apis'
import SessionStorageUtil from "@/utils/session";
import SessionStorageUtil from '@/utils/session'
class AuthUtil {
static auth(params: URLSearchParams): Promise<boolean> {
return new Promise((resolve, reject) => {
if(process.env.REACT_APP_ENV === 'development') {
static async auth (params: URLSearchParams): Promise<boolean> {
return await new Promise((resolve) => {
if (process.env.REACT_APP_ENV === 'development') {
SessionStorageUtil.setItem('__TOKEN__', '6d29e9d470e24cf9af48bd5881b97f80')
resolve(true)
} else {
const token = SessionStorageUtil.getItem('__TOKEN__')
if(!token) {
if(!params.get('code')) {
if (!token) {
if (!params.get('code')) {
apis.common.getLoginUrl().then(res => {
if(res.ok) {
if (res.ok) {
window.location.replace(res.data)
}
})
......@@ -21,9 +20,9 @@ class AuthUtil {
apis.common.login({
code: params.get('code') || '',
state: params.get('state') || '',
amp: params.get('amp') || '',
amp: params.get('amp') || ''
}).then(res => {
if(res.ok) {
if (res.ok) {
SessionStorageUtil.setItem('__TOKEN__', res.data.token)
}
resolve(true)
......
src/utils/axios.ts
import axios, { AxiosInstance, InternalAxiosRequestConfig, AxiosResponse } from "axios";
import SessionStorageUtil from "@/utils/session";
import { Toast } from "@nutui/nutui-react";
import axios, { type AxiosInstance, type InternalAxiosRequestConfig, type AxiosResponse } from 'axios'
import SessionStorageUtil from '@/utils/session'
import { Toast } from '@nutui/nutui-react'
const axiosInstance: AxiosInstance = axios.create({
baseURL: process.env.REACT_APP_API_URL,
timeout: 30000,
timeout: 30000
})
axiosInstance.interceptors.request.use(
(config: InternalAxiosRequestConfig): InternalAxiosRequestConfig => {
config.headers.token = SessionStorageUtil.getItem('__TOKEN__');
return config;
config.headers.token = SessionStorageUtil.getItem('__TOKEN__')
return config
},
(error) => {
return Promise.reject(error);
async (error) => {
return await Promise.reject(error)
}
);
)
axiosInstance.interceptors.response.use(
(response: AxiosResponse ): AxiosResponse => {
(response: AxiosResponse): AxiosResponse => {
// 处理登录失效
if(response.data.code === 9999) {
if (response.data.code === 9999) {
Toast.show('登录失效')
setTimeout(() => {
SessionStorageUtil.clear()
window.location.replace('/')
}, 2000)
}
return response;
return response
},
(error) => {
return Promise.reject(error);
async (error) => {
return await Promise.reject(error)
}
);
)
export default axiosInstance;
\ No newline at end of file
export default axiosInstance
src/utils/session.ts
......@@ -4,9 +4,9 @@ class SessionStorageUtil {
* @param key 键名
* @param value 值，将被自动转换为字符串
*/
static setItem(key: string, value: any): void {
const stringValue = JSON.stringify(value);
sessionStorage.setItem(key, stringValue);
static setItem <T>(key: string, value: T): void {
const stringValue = JSON.stringify(value)
sessionStorage.setItem(key, stringValue)
}
/**
......@@ -15,15 +15,15 @@ class SessionStorageUtil {
* @returns 返回解析后的值，如果不存在则返回null
*/
static getItem<T>(key: string): T | null {
const item = sessionStorage.getItem(key);
const item = sessionStorage.getItem(key)
if (item === null) {
return null;
return null
}
try {
return JSON.parse(item) as T;
return JSON.parse(item) as T
} catch (e) {
console.error("Error parsing sessionStorage item", e);
return null;
console.error('Error parsing sessionStorage item', e)
return null
}
}
......@@ -31,8 +31,8 @@ class SessionStorageUtil {
* 从sessionStorage中删除特定数据
* @param key 键名
*/
static removeItem(key: string): void {
sessionStorage.removeItem(key);
static removeItem (key: string): void {
sessionStorage.removeItem(key)
}
/**
......@@ -40,15 +40,15 @@ class SessionStorageUtil {
* @param key 键名
* @param value 新的值，将被自动转换为字符串
*/
static updateItem(key: string, value: any): void {
this.setItem(key, value);
static updateItem <T>(key: string, value: T): void {
this.setItem(key, value)
}
/**
* 清除所有sessionStorage数据
*/
static clear(): void {
sessionStorage.clear();
static clear (): void {
sessionStorage.clear()
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment