Skip to content

E
eppfax-h5-react
Commit 4ea969c9 by HoMeTown
Options

feat: 代码优化

parent eabaee97
Showing with 545 additions and 155 deletions
src/constants/backend.ts 0 → 100644
/**
* 接口登录失效
*/
export const LOGIN_EXPIRED_CODE = 9999
\ No newline at end of file
src/constants/index.ts 0 → 100644
export * from './backend'
\ No newline at end of file
src/pages/Home/components/HomeContent.tsx
import React, { useEffect, useState } from 'react' import React, {useEffect, useState} from 'react'
import homeProductBanner1Img from '@/assets/images/homeProductBanner1.png' import homeProductBanner1Img from '@/assets/images/homeProductBanner1.png'
import homeProductBanner2Img from '@/assets/images/homeProductBanner2.png' import homeProductBanner2Img from '@/assets/images/homeProductBanner2.png'
import styles from '@/pages/Home/index.module.scss' import styles from '@/pages/Home/index.module.scss'
import HomeProductItem from '@/pages/Home/components/HomeProductItem' import HomeProductItem from '@/pages/Home/components/HomeProductItem'
import { Overlay, Popup, Toast } from '@nutui/nutui-react' import {Overlay, Popup, Toast} from '@nutui/nutui-react'
import homeRulesOverlayCloseImg from '@/assets/images/homeRulesOverlayClose.png' import homeRulesOverlayCloseImg from '@/assets/images/homeRulesOverlayClose.png'
import HomeRuleContent from '@/pages/Home/components/HomeRuleContent' import HomeRuleContent from '@/pages/Home/components/HomeRuleContent'
import apis from '@/apis' import apis from '@/apis'
import { type QueryBranchListResponseData } from '@/apis/common' import {type QueryBranchListResponseData} from '@/apis/common'
import OrderHelper from '@/pages/Home/helper/order' import OrderHelper from '@/pages/Home/helper/order'
import {useNavigate} from "react-router-dom";
const HomeContent: React.FC = () => { const HomeContent: React.FC = () => {
const [productList] = useState([ const [productList] = useState([
{ bannerImg: homeProductBanner1Img, title: '厅堂实物 1元购', buttonTextColor: '#F41E71', productCode: '4' }, {bannerImg: homeProductBanner1Img, title: '厅堂实物 1元购', buttonTextColor: '#F41E71', productCode: '4'},
{ bannerImg: homeProductBanner2Img, title: '微信立减金等你来拿', buttonTextColor: '#1FA189', productCode: '5' } {bannerImg: homeProductBanner2Img, title: '微信立减金等你来拿', buttonTextColor: '#1FA189', productCode: '5'}
]) ]);
const [branchList, setBranchList] = useState<QueryBranchListResponseData[]>([]) const [branchList, setBranchList] = useState<QueryBranchListResponseData[]>([]);
const [rulesOverlayVisible, setRulesOverlayVisible] = useState(false);
const [showBranchListPopup, setShowBranchListPopup] = useState(false);
const [activeBranchIdx, setActiveBranchIdx] = useState(-1);
const [activeProductIdx, setActiveProductIdx] = useState(-1);
const [toasted, setToasted] = useState(false);
const navigate = useNavigate();
const [rulesOverlayVisible, setRulesOverlayVisible] = useState(false) function handleClickProduct(idx: number) {
if (toasted) {
const [showBranchListPopup, setShowBranchListPopup] = useState(false) setActiveProductIdx(idx);
setShowBranchListPopup(true);
const [activeBranchIdx, setActiveBranchIdx] = useState(-1) } else {
Toast.show('请在网点工作人员指导下购买，每人仅有一次活动参与机会');
const [activeProductIdx, setActiveProductIdx] = useState(-1) setToasted(true);
}
}
const [toasted, setToasted] = useState(false) function handleConfirm() {
if (activeBranchIdx === -1 || activeProductIdx === -1) return;
function handleClickProduct (idx: number) { const selectedBranch = branchList[activeBranchIdx];
if (toasted) { if (activeProductIdx === 0) {
setActiveProductIdx(idx) OrderHelper.submitOrder({
setShowBranchListPopup(true) branchName: selectedBranch.branchName,
} else { branchCode: selectedBranch.branchCode,
Toast.show('请在网点工作人员指导下购买，每人仅有一次活动参与机会') productCode: productList[activeProductIdx].productCode,
setToasted(true) number: 1
});
} else if (activeProductIdx === 1) {
navigate(`lottery?branchName=${selectedBranch.branchName}&branchCode=${selectedBranch.branchCode}`);
}
} }
}
function handleConfirm () { useEffect(() => {
OrderHelper.submitOrder({ let isMounted = true;
branchName: branchList[activeBranchIdx].branchName, apis.common.queryBranchList().then(res => {
branchCode: branchList[activeBranchIdx].branchCode, if (isMounted && res.ok) {
productCode: productList[activeProductIdx].productCode, setBranchList(res.data);
number: 1 }
}) }).catch(() => {
} Toast.show(`查询网点列表失败`)
});
useEffect(() => { return () => {
apis.common.queryBranchList().then(res => { isMounted = false;
if (res.ok) { };
setBranchList(res.data) }, []);
}
})
}, [])
return ( return (
<div className={styles.contentWrap}> <div className={styles.contentWrap}>
{productList.map((item, index) => { {productList.map((item, index) => {
return ( return (
<HomeProductItem <HomeProductItem
bannerImg={item.bannerImg} bannerImg={item.bannerImg}
title={item.title} title={item.title}
...@@ -67,65 +78,77 @@ const HomeContent: React.FC = () => { ...@@ -67,65 +78,77 @@ const HomeContent: React.FC = () => {
idx={index} idx={index}
onButtonClick={handleClickProduct} onButtonClick={handleClickProduct}
/> />
) )
})} })}
<div className={styles.productTips}>活动最终解释权归本行所有</div> <div className={styles.productTips}>活动最终解释权归本行所有</div>
{/* 网点列表 */} {/* 网点列表 */}
<Popup <Popup
visible={ showBranchListPopup } visible={showBranchListPopup}
position="bottom" position="bottom"
round round
onClose={ () => { setShowBranchListPopup(false) } onClose={() => {
}> setShowBranchListPopup(false)
}
}>
<div className={styles.branchListPopupWrap}> <div className={styles.branchListPopupWrap}>
<div className={styles.branchListPopupHeader}> <div className={styles.branchListPopupHeader}>
<div className={styles.branchListPopupHeaderCancel} onClick={() => { <div className={styles.branchListPopupHeaderCancel} onClick={() => {
setShowBranchListPopup(false) setShowBranchListPopup(false)
setActiveBranchIdx(-1) setActiveBranchIdx(-1)
}}>取消</div> }}>取消
</div>
<div className={styles.branchListPopupHeaderTitle}>选择营业网点</div> <div className={styles.branchListPopupHeaderTitle}>选择营业网点</div>
<div className={styles.branchListPopupHeaderConfirm} onClick={handleConfirm}>确定</div> <div className={styles.branchListPopupHeaderConfirm} onClick={handleConfirm}>确定</div>
</div> </div>
<div className={styles.branchListPopupContent}> <div className={styles.branchListPopupContent}>
{ branchList.map((item, index) => { {branchList.map((item, index) => {
return ( return (
<div <div
className={styles.branchListItem} className={styles.branchListItem}
onClick={() => { setActiveBranchIdx(index) }} onClick={() => {
setActiveBranchIdx(index)
}}
key={item.branchCode} key={item.branchCode}
style={{ style={{
color: activeBranchIdx === index ? '#e64545' : '', color: activeBranchIdx === index ? '#e64545' : '',
background: activeBranchIdx === index ? '#f7f7f7' : '' background: activeBranchIdx === index ? '#f7f7f7' : ''
}} }}
> >
{item.branchName} {item.branchName}
</div> </div>
) )
}) } })}
</div> </div>
</div> </div>
</Popup> </Popup>
{/* 网点列表 */} {/* 网点列表 */}
{/* 活动规则 */} {/* 活动规则 */}
<div className={styles.contentRulesButton} onClick={() => { setRulesOverlayVisible(true) }}>活动规则</div> <div className={styles.contentRulesButton} onClick={() => {
setRulesOverlayVisible(true)
}}>活动规则
</div>
<Overlay <Overlay
visible={rulesOverlayVisible} visible={rulesOverlayVisible}
closeOnOverlayClick={false} closeOnOverlayClick={false}
onClick={() => { setRulesOverlayVisible(false) }} onClick={() => {
setRulesOverlayVisible(false)
}}
> >
<div className={styles.rulesOverlayWrap}> <div className={styles.rulesOverlayWrap}>
<div className={styles.rulesOverlayContent}> <div className={styles.rulesOverlayContent}>
<img className={styles.rulesOverlayCloseImg} src={homeRulesOverlayCloseImg} onClick={() => { setRulesOverlayVisible(false) }} alt=""/> <img className={styles.rulesOverlayCloseImg} src={homeRulesOverlayCloseImg} onClick={() => {
<HomeRuleContent /> setRulesOverlayVisible(false)
}} alt=""/>
<HomeRuleContent/>
</div> </div>
</div> </div>
</Overlay> </Overlay>
{/* 活动规则 */} {/* 活动规则 */}
</div> </div>
) )
} }
export default HomeContent export default HomeContent
src/pages/Home/helper/order.ts
import apis from '@/apis' import apis from '@/apis'
import { type CreateOrderRequestData } from '@/apis/common' import { type CreateOrderRequestData } from '@/apis/common'
import { type NavigateFunction } from 'react-router-dom' import { type NavigateFunction } from 'react-router-dom'
import {Toast} from "@nutui/nutui-react";
class OrderHelper { class OrderHelper {
/** /**
...@@ -11,36 +12,71 @@ class OrderHelper { ...@@ -11,36 +12,71 @@ class OrderHelper {
* 4. 唤起app支付 * 4. 唤起app支付
* @param params CreateOrderRequestData * @param params CreateOrderRequestData
*/ */
static async submitOrder (params: CreateOrderRequestData) { static async submitOrder(params: CreateOrderRequestData) {
const createOrderRes = await apis.common.createOrder(params) try {
const queryPayUrlRes = await apis.common.queryPayUrl({ orderId: createOrderRes.data }) const createOrderRes = await apis.common.createOrder(params);
const tokenId = queryPayUrlRes.data.split('=')[1] if (!createOrderRes.data) {
const queryPayConfigRes = await apis.common.queryPayConfig<Record<'param', Record<string, string>>>() Toast.show('创建订单失败')
const data = queryPayConfigRes.data return
data.param.tokenId = tokenId }
window.AlipayJSBridge.call('startApp', data, function (result: string) {
console.log(result, '支付结果') const queryPayUrlRes = await apis.common.queryPayUrl({ orderId: createOrderRes.data });
}) if (!queryPayUrlRes.data) {
Toast.show('支付链接获取失败')
return
}
const tokenId = new URLSearchParams(new URL(queryPayUrlRes.data).search).get('TOKEN');
if (!tokenId) {
Toast.show('TOKEN 未找到')
return
}
const queryPayConfigRes = await apis.common.queryPayConfig<Record<'param', Record<string, string>>>();
if (!queryPayConfigRes.data) {
Toast.show('支付配置信息查询失败')
return
}
const data = queryPayConfigRes.data;
data.param.tokenId = tokenId;
window.AlipayJSBridge.call('startApp', data, function (result: string) {
console.log(result, '支付结果');
});
} catch (error) {
Toast.show('提交订单失败')
}
} }
/** /**
* 获取用户的订单 * 获取用户的订单
*/ */
static async queryUserOrder (navigate: NavigateFunction) { static async queryUserOrder(navigate: NavigateFunction) {
const res = await apis.common.queryUserOrder() try {
if (res.ok) { const res = await apis.common.queryUserOrder();
if (res.data?.lotteryOrderId) { if (!res.ok) {
navigate(`/lottery?lotteryOrderId=${res.data.lotteryOrderId}`, { Toast.show('查询用户订单信息失败')
replace: true return
})
} }
if (res.data?.orderId) {
navigate(`/orderDetail?orderId=${res.data.orderId}`, { const data = res.data;
if (data?.lotteryOrderId) {
navigate(`/lottery?lotteryOrderId=${data.lotteryOrderId}`, {
replace: true replace: true
}) });
} else if (data?.orderId) {
navigate(`/orderDetail?orderId=${data.orderId}`, {
replace: true
});
} }
} catch (error) {
Toast.show('查询用户订单信息失败')
} }
} }
} }
export default OrderHelper export default OrderHelper
src/pages/Home/index.tsx
...@@ -5,26 +5,37 @@ import HomeBg from '@/pages/Home/components/HomeBg' ...@@ -5,26 +5,37 @@ import HomeBg from '@/pages/Home/components/HomeBg'
import HomeContent from '@/pages/Home/components/HomeContent' import HomeContent from '@/pages/Home/components/HomeContent'
import AuthUtil from '@/utils/auth' import AuthUtil from '@/utils/auth'
import OrderHelper from '@/pages/Home/helper/order' import OrderHelper from '@/pages/Home/helper/order'
import {Toast} from "@nutui/nutui-react";
const Home: React.FC = () => { const Home: React.FC = () => {
const [params] = useSearchParams() const [params] = useSearchParams();
const navigate = useNavigate() const navigate = useNavigate();
const [isAuthed, setIsAuthed] = useState(false) const [isAuthed, setIsAuthed] = useState(false);
useEffect(() => {
AuthUtil.auth(params)
.then(res => {
OrderHelper.queryUserOrder(navigate).then(() => {
setIsAuthed(res)
})
})
}, [])
return ( useEffect(() => {
const authenticateAndFetchOrders = async () => {
try {
const authResult = await AuthUtil.auth(params);
await OrderHelper.queryUserOrder(navigate);
setIsAuthed(authResult);
} catch (error) {
Toast.show(`${error}`)
}
};
authenticateAndFetchOrders();
}, [params, navigate]);
return (
<div className={styles.wrap}> <div className={styles.wrap}>
{ isAuthed && <HomeBg /> } {isAuthed && (
{ isAuthed && <HomeContent /> } <>
<HomeBg />
<HomeContent />
</>
)}
</div> </div>
) );
} };
export default Home export default Home;
src/pages/Lottery/index.module.scss 0 → 100644
.wrap {
width: 100%;
height: 100%;
background: rgba(0, 153, 148, 1);
overflow-x: hidden;
overflow-y: scroll;
.lotteryWrap {
width: 100%;
height: 559px;
position: relative;
.lotteryWrapBgImg {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.lotteryPrizeBgImg {
width: 288px;
height: 288px;
position: absolute;
top: 205px;
left: 44px;
z-index: 2;
}
.lotteryButtonBgImg {
width: 100px;
height: 120px;
position: absolute;
top: 281px;
left: 138px;
z-index: 3;
}
.lotteryMyPrizeButton {
width: 66px;
height: 24px;
background: rgba(7,103,90,0.6);
border-radius: 20px 0px 0px 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #FFFFFF;
line-height: 16px;
position: absolute;
right: 0;
top: 20px;
z-index: 2;
}
}
.lotteryRuleTitleBg {
width: 100%;
height: 40px;
}
.lotteryRuleContent {
width: 327px;
background: #FFFFFF;
box-shadow: 0 0 4px 0 rgba(0,153,148,0.3), inset 0px 1px 3px 0px rgba(255,255,255,0.6);
margin: 0 auto;
box-sizing: border-box;
padding: 32px 27px;
border-radius: 12px;
margin-bottom: 26px;
.lotteryRuleItem {
width: 100%;
font-size: 14px;
color: #131415;
line-height: 20px;
display: flex;
align-items: flex-start;
margin-bottom: 16px;
&:last-child {
margin-bottom: 0;
}
> span {
width: 5px;
height: 5px;
border-radius: 50%;
border: 2px solid rgba(0, 153, 148, 1);
flex-shrink: 0;
margin-right: 8px;
position: relative;
top: 4px;
}
}
}
.myPrizePopupWrap {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.myPrizePopupTitle {
width: 100%;
height: 54px;
background: #FFFFFF;
box-shadow: 0px 1px 0px 0px rgba(246,245,245,0.8);
border-radius: 20px 20px 0px 0px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.myPrizePopupContent {
flex: 1;
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
background: #F6F7F9;
box-sizing: border-box;
padding: 20px 16px;
.myPrizeItem {
width: 100%;
height: 80px;
box-shadow: 0px 2px 6px 0px rgba(246,245,245,0.8);
position: relative;
margin-bottom: 16px;
&:last-child {
margin-bottom: 0;
}
.myPrizeItemBg {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.myPrizeItemStatus {
width: 57px;
height: 20px;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.myPrizeItemPrice {
width: 100px;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 16px;
left: 0;
z-index: 2;
> div {
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
line-height: 28px;
display: flex;
align-items: center;
> span {
font-size: 20px;
margin-left: 2px;
}
}
> span {
font-size: 12px;
font-weight: 400;
color: #FFFFFF;
line-height: 16px;
margin-top: 2px;
}
}
.myPrizeItemInfo {
position: absolute;
z-index: 2;
left: 116px;
top: 12px;
h3 {
font-size: 15px;
color: #000000;
line-height: 20px;
margin-bottom: 4px;
}
p {
font-size: 12px;
color: #999999;
line-height: 16px;
}
}
.myPrizeItemButton {
background: #FFFFFF;
padding: 4px 13px;
border-radius: 19px;
border: 1px solid #009994;
font-size: 14px;
font-weight: 500;
color: #009994;
line-height: 20px;
position: absolute;
bottom: 12px;
right: 8px;
z-index: 2;
}
}
}
}
}
\ No newline at end of file
src/pages/Lottery/index.tsx
import React from 'react' import React, {useState} from 'react'
import styles from './index.module.scss'
import lotteryWrapBgImg from '@/assets/images/lotteryWrapBg.png'
import lotteryPrizeImg from '@/assets/images/lotteryPrize.png'
import lotteryButtonBgImg from '@/assets/images/lotteryButtonBg.png'
import lotteryRuleTitleBgImg from '@/assets/images/lotteryRuleTitleBg.png'
import myPrizeHighLightImg from '@/assets/images/myPrizeHighLight.png'
import myPrizeUnclaimedImg from '@/assets/images/myPrizeUnclaimed.png'
import { Popup } from '@nutui/nutui-react';
const Lottery: React.FC = () => { const Lottery: React.FC = () => {
return ( const [showMyPrizePopup, setShowMyPrizePopup] = useState(false);
<div>抽奖页</div>
const [lotteryConfig, setLotteryConfig] = useState({
prizeCount: 0, // 商品个数 - 服务端获取商品数量
drawCount: 1, // 第几次抽奖 - 从第一次开始
drawIndex: 0, // 中奖索引 - 顺时针排序 - 服务端获取获奖索引
rotating: 0, // 动画旋转角度
round: 5, // 旋转圈数
duration: 3000, // 动画持续时间
running: false // 锁定抽奖状态
})
const [lotteryStyle, setLotteryStyle] = useState({
transform: '',
transition: '',
WebkitTransform: '',
WebkitTransition: ''
})
function onClickLotteryButton() {
console.log(lotteryConfig,'lotteryConfig')
setLotteryConfig(prevConfig => {
// 如果正在运行，则不进行任何操作
if (prevConfig.running) return prevConfig;
// 更新状态
const newConfig = {
...prevConfig,
running: true,
prizeCount: 5, // 假设这些值是从服务器获取的
drawIndex: 4,
drawCount: prevConfig.drawCount + 1
};
newConfig.rotating = newConfig.round * 360 * newConfig.drawCount - (newConfig.drawIndex + 1) * (360 / newConfig.prizeCount) + 36;
// 更新旋转样式
setLotteryStyle({
transform: `rotate(${newConfig.rotating}deg)`,
transition: `transform ${newConfig.duration}ms ease-in-out`,
WebkitTransform: `rotate(${newConfig.rotating}deg)`,
WebkitTransition: `transform ${newConfig.duration}ms ease-in-out`
});
// 在动画结束后解锁
setTimeout(() => {
setLotteryConfig(prev => ({ ...prev, running: false }));
}, newConfig.duration);
return newConfig;
});
}
return (
<div className={styles.wrap}>
<div className={styles.lotteryWrap}>
<img className={styles.lotteryWrapBgImg} src={lotteryWrapBgImg} alt=""/>
<img style={lotteryStyle} className={styles.lotteryPrizeBgImg} src={lotteryPrizeImg} alt=""/>
<img className={styles.lotteryButtonBgImg} onClick={onClickLotteryButton} src={lotteryButtonBgImg} alt=""/>
<div className={styles.lotteryMyPrizeButton} onClick={() => setShowMyPrizePopup(true)}>我的奖品</div>
</div>
<img className={styles.lotteryRuleTitleBg} src={lotteryRuleTitleBgImg} alt=""/>
<div className={styles.lotteryRuleContent}>
<div className={styles.lotteryRuleItem}><span></span> 该活动仅供掌银新客选择（线下礼品、线上微信立减金抽奖二选一），</div>
<div className={styles.lotteryRuleItem}><span></span> 每季度每个客户号仅可参与其中一项。</div>
</div>
<Popup
closeable
visible={ showMyPrizePopup }
style={{ height: '454px' }}
position="bottom"
round
onClose={ () => { setShowMyPrizePopup(false) } }
>
<div className={styles.myPrizePopupWrap}>
<div className={styles.myPrizePopupTitle}>我的奖品</div>
<div className={styles.myPrizePopupContent}>
<MyPrizeItem />
<MyPrizeItem />
<MyPrizeItem />
<MyPrizeItem />
<MyPrizeItem />
<MyPrizeItem />
<MyPrizeItem />
</div>
</div>
</Popup>
</div>
) )
} }
const MyPrizeItem: React.FC = () => {
return (
<div className={styles.myPrizeItem}>
<img className={styles.myPrizeItemBg} src={myPrizeHighLightImg} alt=""/>
<img className={styles.myPrizeItemStatus} src={myPrizeUnclaimedImg} alt=""/>
<div className={styles.myPrizeItemPrice}>
<div>¥<span>58.88</span></div>
<span>立减金券</span>
</div>
<div className={styles.myPrizeItemInfo}>
<h3>58.88元立减金券</h3>
<p>请于2023.11.30 23:59:59</p>
<p>前完成领取</p>
</div>
<div className={styles.myPrizeItemButton}>去领取</div>
</div>
)
}
export default Lottery export default Lottery
src/utils/auth.ts
...@@ -2,38 +2,39 @@ import apis from '@/apis' ...@@ -2,38 +2,39 @@ import apis from '@/apis'
import SessionStorageUtil from '@/utils/session' import SessionStorageUtil from '@/utils/session'
class AuthUtil { class AuthUtil {
static async auth (params: URLSearchParams): Promise<boolean> { static async auth(params: URLSearchParams): Promise<boolean> {
return await new Promise((resolve) => { if (process.env.REACT_APP_ENV === 'development') {
if (process.env.REACT_APP_ENV === 'development') { SessionStorageUtil.setItem('__TOKEN__', '6d29e9d470e24cf9af48bd5881b97f80');
SessionStorageUtil.setItem('__TOKEN__', '6d29e9d470e24cf9af48bd5881b97f80') return true;
resolve(true) } else {
} else { const token = SessionStorageUtil.getItem('__TOKEN__');
const token = SessionStorageUtil.getItem('__TOKEN__') if (!token) {
if (!token) { if (!params.get('code')) {
if (!params.get('code')) { try {
apis.common.getLoginUrl().then(res => { const res = await apis.common.getLoginUrl();
if (res.ok) { if (res.ok) {
window.location.replace(res.data) window.location.replace(res.data);
} }
}) } catch (error) {
} else { throw error
apis.common.login({ }
} else {
try {
const res = await apis.common.login({
code: params.get('code') || '', code: params.get('code') || '',
state: params.get('state') || '', 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) SessionStorageUtil.setItem('__TOKEN__', res.data.token);
} }
resolve(true) } catch (error) {
}) throw error
} }
} else {
resolve(true)
} }
} }
}) return true;
}
} }
} }
export default AuthUtil export default AuthUtil
src/utils/axios.ts
import axios, { type AxiosInstance, type InternalAxiosRequestConfig, type AxiosResponse } from 'axios' import axios, { type AxiosInstance, type InternalAxiosRequestConfig, type AxiosResponse, type AxiosError } from 'axios'
import SessionStorageUtil from '@/utils/session' import SessionStorageUtil from '@/utils/session'
import { Toast } from '@nutui/nutui-react' import { Toast } from '@nutui/nutui-react'
import {LOGIN_EXPIRED_CODE} from "@/constants";
const axiosInstance: AxiosInstance = axios.create({ const axiosInstance: AxiosInstance = axios.create({
baseURL: process.env.REACT_APP_API_URL, 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
},
async (error) => {
return await Promise.reject(error)
}
)
axiosInstance.interceptors.response.use( const requestInterceptor = (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig => {
(response: AxiosResponse): AxiosResponse => { config.headers.token = SessionStorageUtil.getItem('__TOKEN__');
// 处理登录失效 return config;
if (response.data.code === 9999) { };
Toast.show('登录失效')
setTimeout(() => { const responseInterceptor = (response: AxiosResponse): AxiosResponse => {
SessionStorageUtil.clear() if (response.data.code === LOGIN_EXPIRED_CODE) {
window.location.replace('/') Toast.show('登录失效');
}, 2000) setTimeout(() => {
SessionStorageUtil.clear();
window.location.replace('/');
}, 2000);
} }
return response return response;
}, };
async (error) => {
return await Promise.reject(error) const onError = (error: AxiosError) => Promise.reject(error);
}
) axiosInstance.interceptors.request.use(requestInterceptor, onError);
axiosInstance.interceptors.response.use(responseInterceptor, onError);
export default axiosInstance export default axiosInstance;
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