Question

我在Nextjs项目上的auth进程有一些问题。从example开始，它将令牌存储在Cookie中，但在checkLoggedIn.js中，它会查询数据库，而不是从Cookie中获取令牌。

我想从getInitialProps中的cookie或localstorage获取令牌，但在getInitialProps中，它无法看到localstorage，因为它仍然在服务器端。有没有更好的方法可以在组件渲染之前授权用户？

不确定是否可以从apollo客户端中的getToken获取令牌。

我目前的代码是

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>)
  }
}

谢谢

Answer 1

我使用nookies解决了这个问题。它在Next.js的服务器端（用于getInitialProps）和客户端都可以使用

Answer 2

经过几天的研究，这就是我要做的（诚实的，不是最好的文档）

在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

来自getInitialProps的Auth Nextjs网站，包含localstorage或cookie和Apollo

2 个答案: