Я хочу получить свой authToken, расположенный в файлы cookie.

Но когда я попытался получить его, у меня получилось undefined или что-то в этом роде. Я хотел использовать useContext и поместить _app в контекст (чтобы проверить, авторизован ли пользователь в дочерних элементах), но я никак не могу получить файл cookie.

Я могу получить cookie в следующем коде, который находится в элементе adminPanel, но я не хочу нарушать принцип DRY. Может быть, вы можете порекомендовать мне несколько методов для получения глобального контекста для аутентификации? (без next-auth или чего-то вроде

export async function getServerSideProps(ctx) {
if (ctx.req) {
    axios.defaults.headers.get.Cookie = ctx.req.headers.cookie
    return {
        props: {
            cookie: ctx.req.headers.cookie ? ctx.req.headers.cookie : ''
        }
    }
}

Я попытался получить хоть что-то похожее на токен авторизации в _app, но ничего не вышло (пробовал также getServerSideProps).

export async function getInitialProps(ctx) {
return {
    props:{
        ctx
    }
}

}

В этом случае я получил ctx: undefined ...

Может быть, вы можете порекомендовать мне несколько методов для получения глобального контекста для аутентификации? (без next-auth или чего-то в этом роде)

0
Евгений Скореев 15 Окт 2020 в 13:50

1 ответ

Лучший ответ

В этом вопросе много вопросов, так что простите меня, если я не смогу ответить напрямую, дайте мне знать, если вам нужны дополнительные пояснения.

Во-первых, есть вспомогательный пакет для использования файлов cookie в следующем: https://www.npmjs.com / package / next-cookies

Во-вторых, если вы хотите сохранить свой getServerSideProps СУХИМ, вы всегда можете создать многоразовую функцию или оболочку HOC и загрузить ее на те страницы, которые в ней нуждаются.

В-третьих, получение контекста для _app.jsx немного отличается от получения контекста для обычных страниц. Контекст страницы заключен в контекст приложения, например:

import App from "next/app";

class MyApp extends App {
   //...
}

MyApp.getInitialProps = async (appCtx) => {
  const appProps = await App.getInitialProps(appCtx);

  const { ctx } = appCtx;

  console.log(ctx);

  // todo: get your data from ctx here
};

Но будьте осторожны, это убьет статическую оптимизацию всего вашего сайта, поэтому лучше оставить ее только на каждой странице, которая в ней нуждается.

0
Hussein Duvigneau 15 Окт 2020 в 15:40