2

Я начинающий в изучении 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)
    });
}}

Если кто-то знает, почему так происходит и как исправить, пожалуйста, объясните мне.

15
  • сделайте пример в сандбоксе
    – Sanya H
    26 ноя 2021 в 9:31
  • вот, тут без апи, простое куки. после входа надо перезагрузить страницу (потом доработаю). codesandbox.io/s/kx3te
    – ebrhde
    28 ноя 2021 в 11:38
  • проблема в том, что на стороне сервера не получает куков, поэтому GroupButton не рендерится (т.е. идет различие рендеринга на стороне сервера и клиента)
    – Sanya H
    29 ноя 2021 в 15:51
  • Спаибо за подсказку. Долго искал, что можно придумать, пока есть такая идея: При авторизации и получении данных так же положить в куки auth-token на клиенте (хоть это и не лучшее решение), а при инициализации приложения делать запрос на апи с заголовком, содержащим токен, получать данные по пользователю и отрисовывать его уже с контекстом пользователя. Переписал код опираясь на эту статью - jools.dev/server-side-auth-with-nextjs-context-and-hooks, с методом getInitialProps прямо в _app.tsx, но вижу что запрос на апи просто не идёт в этом методе.
    – ebrhde
    1 дек 2021 в 12:36
  • Новый sandbox - codesandbox.io/s/applecart-next-o9u4v линк на апи заменил, запрос не пройдёт. Но почему он даже не вызывается? В сам метод точно попадает, и куку он наверняка цепляет, а axios-запроса нет. В общем, есть ли способ реализовать взаимодействие приложения с бэкендом без маршрута /api и серверных кук? у меня там php, который эти куки сохранять не будет. или без вариантов, менять путь к бэку, чтоб /api был доступен нексту?
    – ebrhde
    1 дек 2021 в 12:42

1 ответ 1

0

Разобрался. Куки на сервере не достать потому, что я экспортирую приложение как статический сайт и устанавливаю их во время логина только в браузере. Самое простое решение - использовать хук useEffect в AuthProvider:

export const AuthProvider = (props:any) => {
const [auth, setAuth] = useState({ status: 'SIGNED_OUT', username: null });
const [cookies, setCookie] = useCookies(["auth-token"]);

useEffect(() => {
    const authToken = cookies["auth-token"];
    if(authToken) {
        getUser(authToken)
            .then((res) => {
                setAuth(res);
            })
    }
}, [])

const signin = async (login:string, password:string) => {
    return axios.post(process.env.NEXT_PUBLIC_API_ROOT + "/user/login", {
        username: login,
        password: password
    })
        .then((response) => {
            setCookie("auth-token", response.data.data.auth_key, { path: "/", maxAge: 86400});
            setAuth({status: "SIGNED_IN", username: response.data.data.username});
        })
        .catch((error) => {
            console.error('Incorrect email or password entered.');
        });
};
return <AuthContext.Provider value={{ auth, setAuth, signin }} {...props}                      />;

};

Но простое совсем не значит хорошее, хранить токены доступа на клиенте небезопасно, потому что они могут быть легко перехвачены CSRF-атакой

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.