Как обрабатывать аутентификацию на стороне сервера в nextjs?

#axios #next.js #server-side-rendering

Вопрос:

Я устанавливаю токен в localstorage и отправляю его на каждый запрос с помощью (axios), но проблема в том, что при использовании getServerSideProps токен не отправляется, потому что к локальному хранилищу невозможно получить доступ на стороне сервера.

Я думаю, что мне следует использовать файлы cookie, я пробовал js-файлы cookie, но они также не работали на сервере.

Есть ли какое-либо решение для отправки токена на стороне сервера с функцией извлечения в виде getServerSideProps и getStaticProps?

1. Какую библиотеку вы используете для аутентификации?

2. На самом деле я не использую токены, которые я просто храню в redux-store и localstorage, и отправляю их с каждым запросом на стороне клиента.

3. Вы не можете получить доступ localStorage getServerSideProps , так как он работает на сервере. Попробуйте вместо этого использовать файлы cookie для хранения токена ИЛИ перенести проверку подлинности на сторону клиента.

Ответ №1:

Localstorage работает только на стороне клиента; используйте getInitialProps

 function Page({ stars }) {
    return <div>Next stars: {stars}</div>
}
        
Page.getInitialProps = async ({ req }) => {
    let token;
    
    // server
    if (req) return { page: {} };
    else {
        // client
        const token = localStorage.getItem("auth");
        const res = await fetch('https://api.github.com/repos/vercel/next.js', { headers: { Authorization: token }});
        const data = await res.json();
        return { page: data };
    }
};

export default Page

Просто измените мой код, обычно он работает

1. Это не полностью решает проблему. Логика аутентификации не будет выполняться при первой загрузке страницы и getInitialProps запуске на сервере.

2. В настоящее время я делаю запросы, для которых требуется аутентификация на стороне клиента, но я думаю, что это не лучший подход, и я не очень хорошо использую ssr с nextjs.