Я начинающий в изучении react/next и сейчас пробую написать проект с фронтедом на базе next.js/ts. Возникает проблема с авторизацией, которую я пытаюсь сделать сам, без специальной библиотеки, потому что маршрут /api занял бэкендом. Я хочу при отправке запроса авторизации по логину и паролю записывать полученные username и auth-key в куки, чтобы в дальнейшем шапка сразу рендерилась с юзернеймом пользователя, если куки есть. Когда я устанавливаю дефолтное значение для моего контекста авторизации из куки, происходит странное поведение компонента бутстрапа, ButtonGroup. Он как бы заменяется при рендеринге на NavbarCollapse, это отдельный компонент который стоит после него, и не связан. Получается что NavbarCollapse дублируется и кнопки (Обычная с username и dropdown) попадают в него а не в ButtonGroup. Причём если я значением username ставлю простую хардкод-строку, это отрабатывает нормально, а вот если беру из куки - всё ломается, хотя это абсолютно такая же строка, и ничего больше.
Чтобы лучше понять: вот что сейчас - https://radikal.ru/big/fsl1pz269smjc , вот как должно быть - https://radikal.ru/big/pzcmkvs5sj6wj
Вот код компонента Auth:
const Auth:FC<IAuthProps> = (props) => {
const {children, cookies} = props;
const cookieUsername = cookies.get('username');
const [username, setUsername] = useState(cookieUsername);
return (
<AuthProvider username={username} >
{children}
</AuthProvider>
)
AuthProvider:
const AuthContext = createContext<authContextType>(authContextDefaultValues);
export function useAuth() { return useContext(AuthContext); }
export const AuthProvider: FC<authContextType> = (props) => {
const {username,children} = props;
const value = {
username
}
return (
<>
<AuthContext.Provider value={value}>
{children}
</AuthContext.Provider>
</>
); }
И компонент Header:
const Header:FC<headerProps> = ({showSignin}:headerProps) => {
const { username } = useAuth();
return (
<header className="position-fixed w-100">
<Navbar bg="dark" variant="dark" className={styles.navbar_desktop} expand="sm">
<Navbar.Brand href="#" className={styles.logo}><img src="/images/icon/logo.svg"
className={styles.logoImg}
alt="Логотип"/>
</Navbar.Brand>
{username && <ButtonGroup>
<DropdownButton as={ButtonGroup} title="Dropdown" variant="success" id="bg-dropdown-1">
<Dropdown.Item eventKey="1">Profile</Dropdown.Item>
<Dropdown.Item eventKey="2">Orders</Dropdown.Item>
<Dropdown.Item eventKey="3">Logout</Dropdown.Item>
</DropdownButton>
<Button variant="light">
<img id={styles.userIcon} src="/images/icons/user.png" alt="Пользователь"/>
<span className="mx-2">{username}</span>
</Button>
</ButtonGroup>}
{!username && <Button className={styles.signinButton + " py-2 px-4"} onClick={showSignin}
variant="success">Login</Button>}
<Navbar.Collapse>
<Nav className="mr-auto w-100 d-flex flex-column flex-md-row justify-content-around">
<Nav.Link className={styles.navlink_desktop} href="/about">О магазине</Nav.Link>
<Nav.Link href="/#contact">Контакты</Nav.Link>
</Nav>
<Form className="me-3">
<InputGroup className={styles.searchField_desktop}>
<Form.Control type="text" placeholder="What you want to find?" />
<Button variant="success" type="submit">
<img className={styles.searchIcon} alt="Search" src="/images/icons/search.svg" />
</Button>
</InputGroup>
</Form>
</Navbar.Collapse>
<a href="#" className={styles.cart_desktop}>
<img className={styles.cartIcon} alt="Cart" src="/images/icons/cart.svg" />
<Badge className={styles.badge} bg="secondary">0</Badge>
</a>
</Navbar>
</header>
)
Может ещё будет полезен обработчик данных формы входа, где я получаю и устанавливаю куки:
const handleSigninSubmit = (e:FormEvent<HTMLFormElement>) => {
e.preventDefault();
if(!cookies["auth-token"]) {
axios.post(process.env.NEXT_PUBLIC_API_ROOT + "/user/login", {
username: login,
password: password
})
.then(function (response:any) {
setCookie("auth-token", response.data.data.auth_key, { path: "/", maxAge: 259200 });
setCookie("username", response.data.data.username, { path: "/", maxAge: 259200 });
setLogin('');
setPassword('');
props.handleClose();
})
.catch(function (error:any) {
console.log(error)
});
}}
Если кто-то знает, почему так происходит и как исправить, пожалуйста, объясните мне.