Веб-сайт Auth Nextjs из getInitialProps с локальным хранилищем или cookie и Apollo
У меня проблемы с процессом авторизации в проекте Nextjs. Из пример он сохраняет токен в файлах cookie, но в checkLoggedIn.js он запрашивает БД вместо получения токена из cookie.
Я хотел бы получить токен из cookie или localstorage в getInitialProps, но в getInitialProps он НЕ может видеть localstorage, потому что он все еще находится на стороне сервера. Есть ли лучший способ авторизации пользователя перед рендерингом компонента?
Не уверен, что можно получить токен от getToken в клиенте apollo.
Мой текущий код
class DashBoard extends React.Component {
constructor(props) {
super(props)
}
componentDidMount () {
const decodeToken = verifyToken(localStorage.getItem('KEY'));
if (!decodeToken.mail) {
Router.push('/login');
} else {
this.props.loginSuccess(decodeToken.name, decodeToken.mail);
}
}
render () {
return (<div></div>)
}
}
Спасибо
Ответы 2
Я решил это с помощью новички. Он работает как на стороне сервера (для getInitialProps), так и на стороне клиента в Next.js
Вот что я сделал, чтобы решить эту проблему после нескольких дней исследований (честно говоря, не лучшая документация)
В getInitialProps я взял заголовки из запросов и скопировал их в свой запрос fetch.
Profile.getInitialProps = async ({ req }) => {
const headers = { ...req.headers }
const url = `http://localhost:3000/api/profile`
const data = await fetch(url, { headers }).then(res => res.json())
return { data }
}
Имейте в виду, что это работает только на сервере. Для клиента вы можете просто передать {credentials: 'include'} в fetch