Next.js-Passport Как получить данные пользователя после успешного входа в систему? [Маршрутизация на стороне клиента] - PullRequest
Новая
       36

Next.js-Passport Как получить данные пользователя после успешного входа в систему? [Маршрутизация на стороне клиента]

0 голосов
/ 14 января 2019

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

    router.post("/user/login",(req,res,next)=>{

    passport.authenticate('local', function(err, user, info) {
        console.log(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())

Страница панели инструментов: 

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.log(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, к которому я могу получить доступ от клиента, или это сеанс на стороне сервера? спасибо

EDIT: Я решил проблему, перенеся userData с сервера на клиент при успешном входе в систему и установив cookie на стороне клиента. Интересно, это правильное решение в этом случае?

1 Ответ

0 голосов
/ 14 января 2019

Если пользователь вошел в систему. 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 и нажмите enter).

Вы аутентифицируетесь на сервере, поэтому нет способа узнать, есть ли у вас то же во внешнем интерфейсе, если только вы не используете токен и не проверяете токен также во внешнем интерфейсе. Взгляните на Экспресс сессия , которая поможет вам с куки.

...