非常に奇妙な問題があります。ユーザーが Sign-Up または Login できるログインページが React にあります。
ユーザーがサインアップしたら、GUNjs でユーザーを作成します。そして、ログインすると、正常にログインします。ただし、シークレット モードでサイトを開いて同じ資格情報でログインしようとすると、ユーザーが存在しないと表示されます。ピアサーバーも実行しています。ピア サーバーはユーザーのデータを保存しますが、それでもこれは発生します。
私のコード:
decentralized_db.ts
import GUN from "gun";
import "gun/sea";
import "gun/axe";
export const db = GUN({
peers: ["http://localhost:8765/gun"],
});
export const user = db.user().recall({ sessionStorage: true });
peerServer.js
gun = (Gun = require("gun"))({
web: require("http").createServer(Gun.serve(__dirname)).listen(8765),
});
私のReactコンポーネント:
loginPage.tsx
:
import { useState } from "react";
import { user } from "../decentralized_db";
export default function LoginPage() {
const [userCred, setUserCred] = useState({
username: "",
password: "",
});
function login(event: any) {
event.preventDefault();
user.auth(
userCred.username,
userCred.password,
({ err }: any) => err && alert(err)
);
console.log(user);
}
function signup(event: any) {
event.preventDefault();
user.create(userCred.username, userCred.password, ({ err }: any) => {
if (err) {
alert(err);
} else {
login(event);
}
});
}
function handleChange(event: any) {
let name = event.target.name;
let value = event.target.value;
let clonedState: any = { ...userCred };
clonedState[name] = value;
setUserCred(clonedState);
}
return (
<form>
<label htmlFor="username">Username</label>
<input
onChange={handleChange}
name="username"
value={userCred.username}
minLength={3}
maxLength={16}
/>
<label htmlFor="password">Password</label>
<input
onChange={handleChange}
name="password"
value={userCred.password}
type="password"
/>
<button className="login" onClick={login}>
Login
</button>
<button className="login" onClick={signup}>
Sign Up
</button>
</form>
);
}