在我的 nextJS 应用程序中,用户可以进行登录(登录页面),这会创建一个带有 token 的 cookie 并重定向到使用主要组件的路由(主页)。
在主要组件中,我使用 getInitialProps 来获取 cookie token 。但这仅在刷新页面后有效。 所以现在我正在登录并被重定向。如果我单击按钮,则没有 token 。刷新页面后,我确实得到了一个 token 。
我怎样才能避免这种情况?我想我在服务器端做错了什么......
登录
export class Login extends Component {
render () {
return (
<Form id='login' onSubmit={this._onSubmit.bind(this)}>
// Input fields
</Form>
)
}
_onSubmit = (event) => {
event.preventDefault()
const { username, password } = this.state
// Sends mutation request to graphQL server
this.props.signinUserMutation({
variables: { username, password }
}).then(response => {
// Returns token
const token = response.data.token
if (token) {
Cookies.set('auth-token', token)
this.props.client.resetStore().then(() => {
redirect({}, '/main')
})
}
})
}
}
主要
class Main extends Component {
static async getInitialProps (context, apolloClient) {
const { req } = context
const initProps = {}
if (req && req.headers) {
const cookies = req.headers.cookie
if (typeof cookies === 'string') {
const cookiesJSON = jsHttpCookie.parse(cookies)
initProps.token = cookiesJSON['auth-token']
}
}
return initProps
}
clickIt = () => {
console.log(this.props.token)
}
render () {
return (<Button onClick={this.clickIt.bind(this)})
}
}
最佳答案
登录后你的cookie保存在浏览器中,所以你应该在getInitialProps中使用document.cookie
来获取cookie值。
据我理解这段代码:
if (req && req.headers) {
const cookies = req.headers.cookie
if (typeof cookies === 'string') {
const cookiesJSON = jsHttpCookie.parse(cookies)
initProps.token = cookiesJSON['auth-token']
}
}
使用请求 header 获取 cookie 值,这只会在您向服务器发出请求后(刷新页面时)发生。当在浏览器中导航时,代码不会运行,你也不会得到 cookie。这就是为什么您需要直接从浏览器 document.cookie
获取您的 cookie。
考虑使用 localStorage 来保存 auth token 而不是 cookie,它有更好的 api。
由于 componentDidMount
仅在浏览器中执行,因此使用它来获取 cookie 值并将其放置在 redux store 中:
componentDidMount() {
placeTokenInReduxStoreAction(Cookies.get('auth-token'));
}
我假设你使用 cookies-js
关于javascript - ReactJS/下一个JS : Don't get access to cookie/properties after redirecting,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47377672/