forked from yoone/WEB
设备白名单
This commit is contained in:
parent
804e693d95
commit
0cccfe3373
|
|
@ -15,6 +15,7 @@
|
||||||
"@ant-design/charts": "^2.2.6",
|
"@ant-design/charts": "^2.2.6",
|
||||||
"@ant-design/icons": "^5.0.1",
|
"@ant-design/icons": "^5.0.1",
|
||||||
"@ant-design/pro-components": "^2.4.4",
|
"@ant-design/pro-components": "^2.4.4",
|
||||||
|
"@fingerprintjs/fingerprintjs": "^4.6.2",
|
||||||
"@umijs/max": "^4.4.4",
|
"@umijs/max": "^4.4.4",
|
||||||
"@umijs/max-plugin-openapi": "^2.0.3",
|
"@umijs/max-plugin-openapi": "^2.0.3",
|
||||||
"@umijs/plugin-openapi": "^1.3.3",
|
"@umijs/plugin-openapi": "^1.3.3",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import FingerprintJS from '@fingerprintjs/fingerprintjs';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hook: 获取设备指纹(visitorId)
|
||||||
|
*/
|
||||||
|
export function useDeviceFingerprint() {
|
||||||
|
const [fingerprint, setFingerprint] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let isMounted = true;
|
||||||
|
|
||||||
|
async function loadFingerprint() {
|
||||||
|
try {
|
||||||
|
const fp = await FingerprintJS.load();
|
||||||
|
const result = await fp.get();
|
||||||
|
if (isMounted) {
|
||||||
|
setFingerprint(result.visitorId);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('获取设备指纹失败:', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loadFingerprint();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
isMounted = false;
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return fingerprint; // 初始为 null,加载后返回指纹 ID
|
||||||
|
}
|
||||||
|
|
@ -7,22 +7,37 @@ import {
|
||||||
} from '@ant-design/pro-components';
|
} from '@ant-design/pro-components';
|
||||||
import { history, useModel } from '@umijs/max';
|
import { history, useModel } from '@umijs/max';
|
||||||
import { App, theme } from 'antd';
|
import { App, theme } from 'antd';
|
||||||
|
import {useDeviceFingerprint} from '@/hooks/useDeviceFingerprint';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
const Page = () => {
|
const Page = () => {
|
||||||
const { setInitialState } = useModel('@@initialState');
|
const { setInitialState } = useModel('@@initialState');
|
||||||
const { token } = theme.useToken();
|
const { token } = theme.useToken();
|
||||||
const { message } = App.useApp();
|
const { message } = App.useApp();
|
||||||
|
const deviceId = useDeviceFingerprint();
|
||||||
|
const [ isAuth, setIsAuth ] = useState(false)
|
||||||
|
|
||||||
|
console.log(deviceId) ;
|
||||||
|
|
||||||
const onFinish = async (values: { username: string; password: string }) => {
|
const onFinish = async (values: { username: string; password: string }) => {
|
||||||
try {
|
try {
|
||||||
const { data, success } = await usercontrollerLogin(values);
|
const { data, success, code, message: msg } = await usercontrollerLogin({...values, deviceId});
|
||||||
if (success) {
|
if (success) {
|
||||||
|
|
||||||
message.success('登录成功');
|
message.success('登录成功');
|
||||||
localStorage.setItem('token', data?.token as string);
|
localStorage.setItem('token', data?.token as string);
|
||||||
const { data: user } = await usercontrollerGetuser();
|
const { data: user } = await usercontrollerGetuser();
|
||||||
setInitialState({ user });
|
setInitialState({ user });
|
||||||
history.push('/');
|
history.push('/');
|
||||||
|
return
|
||||||
}
|
}
|
||||||
|
if(code === 10001){
|
||||||
|
message.info("验证码已发送至管理邮箱")
|
||||||
|
setIsAuth(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
message.error(msg);
|
||||||
|
|
||||||
} catch {
|
} catch {
|
||||||
message.error('登录失败');
|
message.error('登录失败');
|
||||||
}
|
}
|
||||||
|
|
@ -86,6 +101,16 @@ const Page = () => {
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
|
{
|
||||||
|
isAuth?
|
||||||
|
<ProFormText
|
||||||
|
name="authCode"
|
||||||
|
label="验证码"
|
||||||
|
width="lg"
|
||||||
|
placeholder="请输入验证码"
|
||||||
|
rules={[{ required: true, message: '请输入验证码' }]}
|
||||||
|
/>:<></>
|
||||||
|
}
|
||||||
{/* <div
|
{/* <div
|
||||||
style={{
|
style={{
|
||||||
marginBlockEnd: 24,
|
marginBlockEnd: 24,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue