时间戳

首页 > 解决方案 > 每当我在 react 中保存 app.js 文件时，总是会出现错误并且出现意外令牌

javascript - 每当我在 react 中保存 app.js 文件时，总是会出现错误并且出现意外令牌

问题描述

class App extends Component {
    render() {
        return (

            const jwt = require('jsonwebtoken')

            app.use(express.json())

            const posts = [{
                username: 'Cr3',
                title: 'Post 1'
            }]

            const express = require('express')
            const app = express()

            app.get('/posts', (req, res) => {
                res.json(posts)
            })

            app.post('/login', (req, res) => {
                //Auth the user using tokens

                const username = req.body.username

                const accessToken = jwt.sign(user, process.env.ACCESS_TOKEN_SECRET)
                res.json({ accessToken: accessToken }) //Create access token

                const user = { name: username } //label name as username

            })

            app.listen(3000)

            <
            div id = "colorlib-page" >
            <
            div id = "container-wrap" >
            <
            Sidebar > < /Sidebar> <
            div id = "colorlib-main" >
            <
            Introduction > < /Introduction> <
            About > < /About> <
            Functions > < /Functions>

            <
            /div> < /
            div > <
            /div>


        );
    }
}



export default App;

这是代码，我不知道为什么每当它保存时它就会变得疯狂并显示一堆错误，我试图关闭自动格式化以及将 app.js 更改为 app.jsx ，这让情况变得更糟了一段时间，很多时候，当我重新运行我的 node.js 服务器时，错误似乎一直指向 const jwt 声明意外令牌。

标签： javascriptreactjsexpressvisual-studio-codejwt-auth

解决方案

好的，这里有几个问题。

首先，你在返回途中有一堆东西不能去那里。

你会希望你的 App 类看起来像这样：

class App extends Component {
    render() {
        return (
            <
            div id = "colorlib-page" >
            <
            div id = "container-wrap" >
            <
            Sidebar > < /Sidebar> <
            div id = "colorlib-main" >
            <
            Introduction > < /Introduction> <
            About > < /About> <
            Functions > < /Functions>

            <
            /div> < /
            div > <
            /div>
        );
    }
}

其次，您将前端和后端的东西混合在一起。React 是一个前端库，它在浏览器中运行以帮助渲染页面。express 是一个后端库，可以为您提供所需的任何服务。我不完全确定你试图让这段代码做什么，但你实际上不需要任何花哨的快速后端来提供反应代码，它可以使用像 apache 这样的文件托管服务器来提供。（当然有办法做服务端渲染，用express返回前端数据，但不是这样）。

我建议将所有 express 内容放在一个后端项目中，并将所有 react 内容放在一个单独的前端项目中。如果前端需要与之通信，它可以对正在运行的后端进行 REST 调用。

推荐阅读