Question

我正在使用passportjs中间件进行身份验证，并且可以正常工作，但是当我尝试在组件中使用用户对象时，该属性是不确定的，尽管是在_app.js中传递的。

该应用程序是基于ExpressJS的nextjs。我知道用户已通过身份验证，因为我可以在服务器中但不能在任何组件中对其进行跟踪。

// _app.js
import React from 'react';
import App, { Container } from 'next/app';
import { ThemeProvider } from '@material-ui/styles';
import theme from '../theme/theme';

class MyApp extends App {
    static async getInitialProps({ Component, ctx }) {
        let pageProps = {};
        if (Component.getInitialProps) {
            pageProps = await Component.getInitialProps(ctx);
        }
        if (ctx.req && ctx.req.session && ctx.req.session.passport) {
            pageProps.user = ctx.req.session.passport.user;
        }
        return { pageProps };
    }

    constructor(props) {
        super(props);
        this.state = {
            user: props.pageProps.user
        };
    }

    render() {
        const { Component, pageProps } = this.props;

        const props = {
            ...pageProps,
            user: this.state.user,
        };

        return (
            <Container>
                <ThemeProvider theme={theme}>
                    <Component {...props} />
                </ThemeProvider>
            </Container>
        );
    }
}

export default MyApp;

Webstorm指向user: this.state.user行，抱怨未解析的变量user，但我不明白为什么未解析为变量，而是在构造函数中定义的。

编辑：这是server.js

const express = require("express");
const http = require("http");
const next = require("next");
const session = require("express-session");
const passport = require("passport");
const uid = require('uid-safe');
const authRoutes = require("./auth-routes");
const oAuth2Strategy = require("./lib/passport-oauth2-userinfo");

const dev = process.env.NODE_ENV !== "production";
const app = next({
    dev,
});
const handle = app.getRequestHandler();

app.prepare().then(() => {
    const server = express();

    const sessionConfig = {
        secret: uid.sync(18),
        cookie: {
            maxAge: 86400 * 1000 // 24 hours in milliseconds
        },
        resave: false,
        saveUninitialized: true
    };
    server.use(session(sessionConfig));

    passport.use(new oAuth2Strategy(
        {
            authorizationURL: process.env.REACT_APP_AUTH_URL,
            tokenURL: process.env.REACT_APP_AUTH_TOKEN,
            clientID: process.env.REACT_APP_CLIENT_ID,
            clientSecret: process.env.REACT_APP_SECRET,
            callbackURL: process.env.REACT_APP_CALLBACK,
            userProfileURL: process.env.REACT_APP_OPENID
        },
        function(accessToken, refreshToken, extraParams, profile, done) {
            console.log(profile);
            return done(null, profile);
        }

    ));
    passport.serializeUser((user, done) => done(null, user));
    passport.deserializeUser((user, done) => done(null, user));

    server.use(passport.initialize());
    server.use(passport.session());
    server.use(authRoutes);

    const restrictAccess = (req, res, next) => {
        if (!req.isAuthenticated()) return res.redirect("/login");
        next();
    };

    server.use("/", restrictAccess);
    server.use("/profile", restrictAccess);

    server.get("*", handle);

    http.createServer(server).listen(process.env.PORT, () => {
        console.log(`listening on port ${process.env.PORT}`);
    });
});

编辑2：感谢@SimplyComplexable，我进行了一些故障排除。在我的index.js中，我可以像这样访问用户道具this.props.user.displayName没问题。

这有效：

import Landing from "./Landing"
import React from "react";

class Home extends React.Component {

    render() {
        return (
            <div>
                {this.props.user.displayName}
                <Landing />
            </div>
        )
    }
}

export default Home;

但是，例如，在Landing组件中，prop.user是未定义的。也许我无法正确访问或以某种方式通过了道具？

class Landing extends React.Component {
    const {user} = this.props;
    return (
        <div>
            ...
    )
}
export default withStyles(useStyles)(Landing);

Answer 1

基于您现在拥有的代码的问题是，您没有将user传递给Landing组件。如果您通过以下更改更新主页，则您的代码应该可以正常工作。

import Landing from "./Landing"
import React from "react";

class Home extends React.Component {

    render() {
        return (
            <div>
                {this.props.user.displayName}
                <Landing user={this.props.user}/>
            </div>
        )
    }
}

export default Home;

对于特定的用户而言，这对于context来说是一个绝佳的机会，因此您不必显式地将用户支持传递给每个组件。这是一个简单的示例：

import Landing from "./Landing"
import React from "react";

export const UserContext = React.createContext({});

class Home extends React.Component {

    render() {
        return (
            <div>
                {this.props.user.displayName}
                <UserContext.Provider value={this.props.user}>
                  <Landing user={this.props.user}/>
                </UserContext.Provider>
            </div>
        )
    }
}

export default Home;

import React from 'react';
import UserContext from './Home';

const Landing = () => {
    const user = React.useContext(UserContext);
    return (
      <div>
        {user.displayName}
      </div>
    )
}
export default withStyles(useStyles)(Landing);

为什么状态未在nextjs中解析为变量

1 个答案: