Next.js-Passport Как получить данные пользователя после успешного входа в систему? [Маршрутизация на стороне клиента]
Я пытаюсь получить доступ к данным пользователя после успешного входа в систему, а также из каждого компонента. Вот как я вхожу в систему:
router.post("/user/login",(req,res,next)=>{
passport.authenticate('local', function(err, user, info) {
console.info(JSON.stringify(user)) // here i got user data
if (err) { return next(err); }
if (!user) { return res.send("fail"); }
req.logIn(user, function(err) {
if (err) { return next(err); }
return res.send("success") // when client gets success message,it will do Router.push("/dashboard")
});
})(req, res, next);
})
Конфигурация сервера:
server.use(cookieParser())
server.use(bodyParser.json())
server.use(passport.initialize());
server.use(session({
secret: 'jumpingdonger',
resave: true,
saveUninitialized: true,
cookie : { secure : false, maxAge : (4 * 60 * 60 * 1000) }, // 4 hours
}))
//Passport Middleware
server.use(passport.initialize())
server.use(passport.session())
Страница DashBoard:
import Header from '../components/Header'
import Layout from '../components/MyLayout.js'
import React, { Component } from 'react';
import axios from 'axios';
import Router from 'next/router'
export default class DashBoard extends Component{
constructor(props) {
super(props);
this.state = {
};
}
componentWillMount(){
console.info(this.props)
}
logout =()=>{
axios.get('/api/user/logout').then((result)=>{
if (result.data= = "success"){
Router.push("/")
}
})
}
render(){
if (this.props.userData == undefined){
return(
<Layout>
<p>First you must login!</p>
</Layout>
)
}else{
return(
<Layout>
<p>Welcome to your dashboard {this.props.userData.userName}</p>
<a onClick = {this.logout}>logout</a>
</Layout>
)
}
}
}
DashBoard.getInitialProps = async function(context) {
if (context.req !=undefined){ // which means that we are from server
return {
userData:context.req.user
};
}else{
return{}
}
}
Итак, после успешного входа в систему я перенаправляюсь на страницу панели инструментов. Теперь в компоненте панели инструментов я пытаюсь получить данные пользователя на getInitialProps. Проблема в том, что я перенаправлен клиентом, использующим Router.push(), я не могу получить данные на getInitialProps, если я не обновлю страницу с браузер.Если я обновляюсь, context.req.user заполняется данными пользователя. Итак, как мне получить доступ к данным пользователя с маршрутизацией на стороне клиента со страницы панели инструментов, а также со всех других страниц? Я не мог понять, помещает ли это пользовательские данные в файл cookie, к которому я могу получить доступ с клиента, или это сеанс на стороне сервера?
Благодарность
Обновлено: Я решил проблему, передав userData с сервера на клиент при успешном входе в систему и установив cookie на стороне клиента. Интересно, это правильное решение в данном случае?
Ответы 2
Если пользователь вошел в систему. passport будет создавать объект user в req для каждого запроса в express.
if (req.user) {
// logged in
} else {
// not logged in
}
В next.js, когда вы используете getInitialProps, у вас есть доступ к серверу с context.req.
нравится:
static async getInitialProps({req}){
if (req){
// called on server
// here you can check for that user object
} else {
// called on client
}
}
Однако этот код будет работать, если у вас есть запрос SSR в приложении next.js (обновите страницу или введите URL-адрес и нажмите ввод).
Вы аутентифицируетесь на сервере, поэтому нет возможности узнать, есть ли у вас то же самое во внешнем интерфейсе, если вы не используете токен и не проверите токен во внешнем интерфейсе. Взгляните на Экспресс-сессия, который поможет вам с файлами cookie.
Для решения этой проблемы вам нужно будет использовать хранилище redux. Если вы настроили свой магазин redux, вам необходимо перенести его в свой магазин redux. Добавьте этот код в свой файл _app.js. Ваши страницы могут подключаться к магазину.
componentDidMount () {
const { pageProps: { user }, reduxStore: { dispatch } } = this.props
if (user) {
dispatch({
type: FETCH_USER,
payload: user
})
}
}
Привет, спасибо за ответ. Наконец-то мне удалось получить доступ к пользовательским данным внутри context.req.user. Но, как вы сказали, если используется маршрутизация на стороне клиента, я не мог получить к нему доступ. Так что я все еще ищу способ доступа к пользовательским данным на клиенте боковая маршрутизация