Question

我要在成功登录后以及从每个组件访问用户数据。这是我登录用户的方式：

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

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.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还是服务器端会话？谢谢

编辑：我通过成功登录后将userData从服务器传输到客户端并在客户端设置cookie来解决了这个问题。我想知道在这种情况下这是否是正确的解决方案？

Answer 1

如果用户已登录。passport将为user中的每个请求在请求中创建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
 }

}

但是，如果您在next.js应用中有SSR请求（刷新页面或输入URL并按Enter键），此编码将起作用。

您在服务器中进行身份验证，因此除非您使用令牌并在前端也验证令牌，否则无法找出前端是否具有相同的身份。看看Express session，它将帮助您使用Cookie。

Answer 2

您将需要使用Redux存储来解决此问题。如果您已建立Redux商店，则需要将其添加到Redux商店中。在您的_app.js文件中添加此代码。您的页面可以连接到商店。

  componentDidMount () {
   const { pageProps: { user }, reduxStore: { dispatch } } = this.props
   if (user) {
     dispatch({
       type: FETCH_USER,
       payload: user
    })
   }
  }

Next.js-Passport成功登录后如何获取用户数据？[客户端路由]

2 个答案: