我对反应世界和整个堆栈世界都是新手,但我一直在不断地寻找对以下内容的答案,希望能得到一些指导。
我正在使用React和Express创建一个应用程序。它需要身份验证,所以我计划使用Passport来帮助。客户端JS使用React路由器浏览网站。这一切都很好,但我的问题是浏览器发出的初始GET请求。
我将首先描述我的特定应用程序需求,然后概括我不理解的内容。
正如我所说的,我的应用程序需要OAuth2身份验证。如果你试图在我的网站上获得一个路径,但你没有登录,它应该只是加载登录页面。如果您已登录,则按常规加载并找到您的路径。类似于facebook,我希望登录URL与"feed“页面相同。类似于facebook.com '/‘路由是如何登录页面或您的新提要取决于您是否登录,我想要相同的东西。
据我所知,Passport通过检查请求头在后端进行身份验证。所以我知道我应该有一种中间件,上面写着“如果用户被登录,继续沿着路径继续,否则在页面中呈现登录”.这是怎么做的?代码会是什么样子?我使用Express的唯一经验来自一个入门类,它使用res.render返回一个HTML文件,并通过一些模板引擎(如工具栏)传递它。但我不知道如何处理反应路线。我还会使用res.render()吗?还有别的吗?
假设我的index.html有一个根div来注入反作用。如果我不得不猜测的话,我会用带有路由的index.html文件返回那个.js页面,然后在后端以某种方式返回我希望它在我的反应路径上匹配的路由(登录一个还是用户请求的)?
更广泛地说,我想我只是搞不懂如何完成最初的请求到一个使用反应路线的网站。1)服务器如何与所有内容交互以呈现我所要求的内容? 2)代码将是什么样子的。我唯一的经验是从一个基本的Udemy课程,它只是使用“反应-脚本开始”来呈现页面。
花了一整天的时间在谷歌上搜索这个问题之后,它把我带到了SSR,这本身就是一个兔子洞,我甚至不确定这是否是我需要帮助的东西。是吗?
我显然是缺少一些基本知识,因为这真的是绊倒我,所以如果你有任何资源学习更多,只需张贴他们。谢谢!
发布于 2019-01-21 05:08:06
我理解你的斗争,因为我必须亲自经历当前端和后端相结合时,具体反应和节点。首先,我们知道浏览器/客户端总是会向服务器发起请求,那么React路由器是如何控制路由的呢?其实很简单,你所要做的就是从你的快车服务器返回整个反应应用程序。代码将如下所示:
const express = require('express');
const app = express();
app.get('/*', (req, res, next) => {
// Return React App index.html
});
app.listen(3000);一旦react应用程序在用户浏览器上呈现(不要担心路径,因为react将根据您在客户端编写的代码的URL自动呈现,它还将在扫描本地存储空间、cookie等时处理身份验证和提要页面),它将控制路由,而不是发送到快递服务器的请求。但是当我们从服务器请求数据时会发生什么呢,它会在每个路由上返回响应应用程序,所以我们需要设置一个api路由来处理任何数据请求。
app.get('/api/v1/*', (req, res, next) {
// Return some data in json format
});希望这能让你洞察你在寻找什么。
发布于 2019-01-21 03:39:33
我认为,您所面临的根本差距源于那些“入门课程”,将整个浏览器客户端推入应用程序服务器以快速启动和运行,例如,Node服务器呈现整个React应用程序并以API的形式运行.
// Ajax request from React app to: http://example.com/api
app.use('/api/*'),()=> {
res.send({ <!-- some JSON object -->})
})
// User visits in browser: http://example.com/**/*
app.use('/*',()=>{
res.render(<!-- entire React App sent to browser -->)
})第一个请求(假设用户不访问/api/* )将只发送回响应包。此外,客户端中的用户导航通常会从React向运行在同一节点程序上的Express路由发送XHR请求(或打开WebSockets)。
在许多情况下,将程序的这些部分分开是有意义的,例如,从一个与请求数据的位置完全不同的位置进行响应。这有很多原因,但优化计算资源以满足它们对CPU、内存、网络.etc和代码/部署可管理性的不同需求是我的主要原因。
例如..。
1. Nginx, Apache, a 'cloud proxy' .etc direct the traffic to a static React bundle, which has no authentication and never makes contact with your Node server.
2. If the user has Authenticate previously they will have token in local storage (if you're using JWTs for Authentication) and your React app will be configured to always check for these tokens when you first it is initially loaded.
3. If the user has a token it will send an Ajax request in the background with the token as a Header Bearer and will send back user data, then redirect them to an 'Authenticated page' like the FB feed you mention.
4. If they don't have a token or the token Authentication fails then React will redirect them to the Login or Registration page
反应
反应基本上高千斤顶浏览器的本机‘位置’功能(什么显示在你的域名)。因此,初始页面加载后的任何事件(按钮、单击等)都完全由内部反应来处理,并使用这些路由来确定要显示什么或通过Ajax (XHR)从API中获取哪些数据。
如果用户执行硬页重新加载,那么该请求将返回到服务器,并且它将再次执行整个周期。
反应路由器
允许你同时做两件事..。
SSR
我只玩过SSR,所以我可以和它交谈,但是它为初始呈现提供了极低的延迟,可以在1个网络请求中完成,所以您需要在程序中使用那些非常重要的区域。
不确定这是否回答了你的问题,但让我知道你是否想让我详细说明或提供一些更详细的资源。
发布于 2019-01-21 06:00:54
对于经验较少的开发人员来说,SSR有点困惑,让我们暂时忘掉它吧。
假设前端JavaScript (React)和后端Javascript (NodeJS)是两个独立的应用程序,它们通过API相互通信,这将更加容易。
这里显示登录组件和Feed组件的代码取决于您是否在
import React, { Component } from "react";
import axios from "axios";
class Home extends Component {
constructor() {
const accessToken = localStorage.getItem("accessToken");
this.state = {
accessToken,
feeds: []
};
}
componentDidMount() {
if (this.state.accessToken) {
axios(`api/feeds?accessToken=${this.state.accessToken}`).then(({ data }) => {
this.setState({
feeds: data
});
});
}
}
render() {
if (this.state.accessToken) {
return <FeedsComponent feeds={this.state.feeds} />;
}
return <LoginComponent />;
}
}这是你的后端
const express = require("express");
const app = express();
app.get('/api/feeds', (req, res, ) => {
const feeds = [
{},
{}
]
res.status(200).json(feeds);
});
app.listen(3001);请记住,它们是两个不同的应用程序,可以放在两个不同的文件夹中,不同的服务器,不同的端口。
https://stackoverflow.com/questions/54282344
复制相似问题