Javascript React：使用基本身份验证实现登录

我想创建一个包含登录名的react web应用程序。我的后端是用JAX-RS和基本身份验证实现的。下面是

web.xml

的一个片段和

资源

. 因此，我可以使用
使用者
访问每个组件中的用户名/密码。下面是一个如何设置和使用数据的示例。有关更完整的示例，请参阅

导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户：{
用户名：“”，
密码：“”
}
};
this.login=this.login.bind（this）；
}
登录（用户名、密码）{
这是我的国家({
用户：{
用户名：用户名，
密码：密码
}
});
}
render（）{
返回(
/*其他组成部分*/
);
}
}
导出默认类标头扩展React.Component{
render（）{
返回(
{value=>
{value.username}
}
);
}
}

我的问题是：

如何在请求中使用上下文中的用户名和密码，而不必在每次请求时都传递它们？
有许多可能的解决方案。您可以使用
bind
方法并通过设置用户名和密码的绑定
get
方法。因此，get函数将接受
用户名
和
密码
作为参数

export function get(username, password, url)

提供程序将传递绑定函数

<UserContext.Provider value={get.bind(null,this.state.user,this.state.password)}>



为了不触发回流，您可以解除绑定

login(username, password){
  this.setState({
        authenticatedGet: get.bind(null,username,password)
  });
}
//....
<UserContext.Provider value={this.state.authenticatedGet}>

登录（用户名、密码）{
这是我的国家({
authenticatedGet:get.bind（null、用户名、密码）
});
}
//....

我真的不认为你应该用上下文来描述这类东西。事实上，上下文对UI逻辑很有好处，这更多是关于服务层的。还有许多其他的解决方案，包括在适当的情况下将
get
作为道具传递，或者如果您将
redux
与
redux thunk
一起使用，则将其作为
thunk传递。使用extraargument
但这确实超出了您的问题范围。
我不明白您想要实现什么样的目标。您想发送一些带有用户名的请求，一些没有？@degr我想发送所有带有用户名的请求。但是用户名不应该硬编码。相反，我希望用户输入他的名字并在所有请求中使用它。您需要变量赋值方面的帮助吗？您不知道如何从文本输入中获取值并将其设置为变量？@degr我在
UserContext
中有必要的信息（用户名、密码）。我可以访问它，如
标题所示。我不知道如何在
request.js
文件中使用这些数据。仅仅将其设置为全局变量感觉是错误的，我能想到的唯一其他方法是将用户作为参数传递给请求，如
函数get（url，user）
。但这就需要在每个需要获取数据的组件中实现
UserContext.Consumer
。这感觉不必要的复杂。你能举一个例子，你调用
request
方法吗？拟议的解决办法将取决于这一点。有很多方法可以做到这一点，每种方法都有自己的缺点。谢谢你的回答！仔细想想，我得出的结论是你是对的，
Context
不应该用于此。现在，我将用cookies实现一个解决方案。
<UserContext.Provider value={get.bind(null,this.state.user,this.state.password)}>

login(username, password){
  this.setState({
        authenticatedGet: get.bind(null,username,password)
  });
}
//....
<UserContext.Provider value={this.state.authenticatedGet}>