关键词：
【中文标题】在javascript和axios中为来自前端的每个api调用发送firebase身份验证令牌【英文标题】：send firebase authentication token for every api call from frontend in javascript and axios 【发布时间】：2021-06-02 17:48:19 【问题描述】：我正在构建一个使用 firebase 身份验证的网络应用程序。我正在尝试将 firebase 令牌发送到每次调用的后端 API。 我可以检索令牌并将其打印在控制台中，但是每当我尝试将其发送到后端时，令牌似乎都是空的。 我使用的后端是 Python django，
这是我尝试过的，
token.js
function clienttoken()
firebase.auth().onAuthStateChanged(function myuser(user)
if (user)
//window.location.href = 'index.html';
firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).then(function(idToken)
// Send token to your backend via HTTPS
var token = idToken;
window.alert(token);
//return token;
)
);
我能够在控制台中成功打印令牌。
当我尝试在 index.html 中使用它时
<script>
(function ()
var output = document.getElementById('output');
document.getElementById('post').onclick = function mydata ()
var data = document.getElementById('data').value;
var token = clienttoken();
//window.alert(token);
const config =
headers: Authorization: 'Bearer' +token
;
axios.post('http://127.0.0.1:7000/posts/', mydata.data,config)
.then(function (res)
//output.className = 'container-fluid';
resp = JSON.stringify(res.data.body);
resp_new=resp.replace(/\\n/g,'\n')
//output.innerHTML = JSON.stringify(res.data.body);
$("#resp").text(resp_new);
$("#resp").show()
)
.catch(function (err)
output.className = 'container text-danger';
output.innerHTML = err.message;
);
;
)();
</script>
Axios 甚至在获取令牌之前就开始执行，并且每次都会向后端发送一个空令牌。
我尝试使用异步功能 token.js
async function retrievetoken()
firebase.auth().onAuthStateChanged(async function mytoken(user)
if (user)
// User is signed in.
const idtoken = await firebase.auth().currentUser.getIdToken(/* forceRefresh */ true)
//window.alert(token);
return idtoken;
else
// No user is signed in.
window.location.href = 'login.html';
);
index.html
<script>
(function ()
var output = document.getElementById('output');
document.getElementById('post').onclick = function mydata ()
var data = document.getElementById('data').value;
async function retrievetoken()
const token = await clienttoken();
window.alert(token);
;
)();
</script>
我试图打印令牌，但我得到的只是[Object:Promise]。即使在异步调用之后，也会将空令牌发送到后端。
请帮助我了解如何为每个 API 调用发送 firebase 令牌。
还请找到我的后端编码，
class GetPostList(APIView):
cred = credentials.Certificate(r'pathto/firebase-sdk.json')
firebase_admin.initialize_app(cred)
def post(self,request,format=None):
jwt_token = request.META.get('Authorization')
#jwt_token = request.headers['Authorization']
decoded_token = auth.verify_id_token(jwt_token)
uid = decoded_token['uid']
endpoint = "https://jsonplaceholder.typicode.com/posts/"
header = "Content-type": "application/json;charset=UTF-8"
send_data = request.data
if uid is not None:
response = requests.post(endpoint, json=send_data, headers=header)
return Response(response.json())
else:
return Response('error': 'Token does not exist', status=401)
我认为我确信后端编码看起来不错。但是，我无法从前端为每个 API 调用发送令牌。
【问题讨论】：
为什么要把token 用大括号括起来？ （这里： const config = headers: Authorization: 'Bearer' +token ; ）
【参考方案1】：
使用回调函数时，return 关键字返回的是回调函数，而不是原始函数。因此，您需要使用 await 关键字来等待 promise 解析，然后返回该值。
为避免这种情况，您应该使用firebase.auth().currentUser 来获取当前用户，而不是为用户登录或注销创建监听器。这还有一个好处，即您的函数不会在用户注销时重新运行等。
async function retrieveToken()
const currentUser = firebase.auth().currentUser;
if (user)
// User is signed in.
const idToken = await firebase.auth().currentUser.getIdToken( /* forceRefresh */ true)
// Because this return statement is no longer in a nested callback function, it now returns properly.
return idtoken;
else
// No user is signed in.
window.location.href = 'login.html';
【讨论】：
如何在 axios 请求中为对象数组设置正确的类型？
】如何在axios请求中为对象数组设置正确的类型？【英文标题】：howtosetpropertypesinaxiosrequestforarrayofobjects?【发布时间】：2021-09-2112:56:17【问题描述】：我正在尝试为api请求编写axios服务，但我无法理解此错误：类型“AxiosResponse”... 查看详情
在 Pandas 中为 DataFrame 中的每一行返回多行
】在Pandas中为DataFrame中的每一行返回多行【英文标题】：ReturnmultiplerowsforeveryrowinaDataFrameinPandas【发布时间】：2020-04-3015:41:10【问题描述】：这是我想要执行的任务，我有大约7000个站点和50个类别的列表，每个类别每个月都有一... 查看详情
React Redux Axios：POST 请求未收到来自 redux 状态的凭据
】ReactReduxAxios：POST请求未收到来自redux状态的凭据【英文标题】：ReactReduxAxios:POSTRequestnotreceivingcredentialsfromreduxstate【发布时间】：2018-04-1904:39:52【问题描述】：我一直在对我的项目进行身份验证。我有一个提供JWT令牌的RESTapi后... 查看详情
如何在Javascript中为1到1000的奇数和偶数编写脚本？
】如何在Javascript中为1到1000的奇数和偶数编写脚本？【英文标题】：Howtodoascriptforoddandevennumbersfrom1to1000inJavascript?【发布时间】：2015-01-1001:53:36【问题描述】：我正在研究一本带有已解决示例的Javascript书籍，但有一个示例没有解... 查看详情
在 Django 中为来自客户端的请求和来自服务器的响应（REST API）压缩 JSON 有效负载。
】在Django中为来自客户端的请求和来自服务器的响应（RESTAPI）压缩JSON有效负载。【英文标题】：CompressJSONpayloadinDjangoforbothrequestfromclientandresponsefromserver(RESTAPI).【发布时间】：2015-07-1721:24:22【问题描述】：我想知道是否有一种方... 查看详情
在 Nuxt JS 中为 Axios 配置本地 php 端点
】在NuxtJS中为Axios配置本地php端点【英文标题】：ConfigurelocalphpendpointforAxiosinNuxtJS【发布时间】：2019-12-1312:23:05【问题描述】：我想使用Axios进行指向本地PHP文件的客户端AJAX调用。为什么选择PHP？我在一个简单的基于PHP的API中有... 查看详情
如何在 Javascript 中为 iOS 和 Android 创建可靠的指南针？
】如何在Javascript中为iOS和Android创建可靠的指南针？【英文标题】：HowdoIcreateareliablecompassforiOSandAndroidinJavascript?【发布时间】：2019-01-0615:37:35【问题描述】：我正在尝试在Javascript/JQuery中创建一个可靠的指南针（使用deviceorientation... 查看详情
如何使用 async/await 编写 .then 函数，以便捕获来自 axios 的响应（在单独的文件和方法中，在 vue 中）
】如何使用async/await编写.then函数，以便捕获来自axios的响应（在单独的文件和方法中，在vue中）【英文标题】：HowcanIwritea.thenfunctionwithasync/await,sothatIcancatchtheresponsefromaxios(inseperatefilesandmethods,invue)【发布时间】：2021-07-1922:27:05【... 查看详情
在 AXIOS 中为 GET 方法发送请求正文会引发错误
】在AXIOS中为GET方法发送请求正文会引发错误【英文标题】：SendingRequestbodyforGETmethodinAXIOSthrowserror【发布时间】：2019-05-2901:16:00【问题描述】：我有一个React应用程序，我正在将POST方法更改为GET请求正文。它适用于POST请求，但是... 查看详情
如何在primarySwatch小部件中为应用栏添加颜色，但颜色来自（fromARGB和fromRGBO）
】如何在primarySwatch小部件中为应用栏添加颜色，但颜色来自（fromARGB和fromRGBO）【英文标题】：howtoaddcolorsforappbarinprimarySwatchwidgetbutcolorisbefrom(fromARGBandfromRGBO)【发布时间】：2021-10-1716:40:54【问题描述】：我需要如何为primarySwatch调... 查看详情
在javascript中为datepicker设置maxDate和minDate，不起作用
】在javascript中为datepicker设置maxDate和minDate，不起作用【英文标题】：SetmaxDateandminDatefordatepickerinjavascript,notworking【发布时间】：2017-05-2412:18:23【问题描述】：我在Google中查看了很多教程和QA，并尝试了所有排列和组合技巧。我的... 查看详情
尝试使用 Axios 和 Vue Bootstrap 表显示来自 API 的数据
】尝试使用Axios和VueBootstrap表显示来自API的数据【英文标题】：TryingtouseAxiosandVueBootstraptabletodisplaydatafromAPI【发布时间】：2020-12-2607:28:19【问题描述】：大家好，所以我无法将此API中的数据显示到我的Vue引导表中。它给了我这个... 查看详情
反应应用程序中来自axios POST的空响应，rails服务器显示201状态
】反应应用程序中来自axiosPOST的空响应，rails服务器显示201状态【英文标题】：emptyresponsefromaxiosPOSTinreactapp,railsservershows201status【发布时间】：2019-01-1114:31:38【问题描述】：我有一个连接到RailsAPI的反应前端，使用Knock和JWT对用户... 查看详情
在 Safari 中为网站重新加载 javascript 和 css 文件
】在Safari中为网站重新加载javascript和css文件【英文标题】：ReloadjavascriptandcssfilesforawebsiteinSafari【发布时间】：2017-09-1317:12:50【问题描述】：这让我发疯。每个浏览器和设备都有自己的方式来清除缓存并重新加载.js和.css文件。例... 查看详情
使用 Ajax 时如何在 JavaScript 和 php 中为下拉菜单设置增量值
】使用Ajax时如何在JavaScript和php中为下拉菜单设置增量值【英文标题】：HowtoSetincrementalvaluefordropdownbothinJavaScriptandphpwhileusingAjax【发布时间】：2017-03-1900:21:53【问题描述】：我正在研究多动态下拉选项，并尝试在用户单击添加按... 查看详情
如何在 javascript 中为桌面和移动设备创建不同的点击行为？
】如何在javascript中为桌面和移动设备创建不同的点击行为？【英文标题】：Howtocreatedifferentonclickbehaviorfordesktopandmobileinjavascript?【发布时间】：2012-07-2108:57:10【问题描述】：我正在开发生成一段格式化文本的简单表单（你可以看... 查看详情
来自嵌套 Axios 请求的 VueJS 数据未在视图中呈现
】来自嵌套Axios请求的VueJS数据未在视图中呈现【英文标题】：VueJSdatafromnestedAxiosrequestsnotrenderinginview【发布时间】：2019-01-0606:55:41【问题描述】：我正在尝试使用VueJS和Axios在页面上列出来自API的一组帖子。我面临的问题是需要... 查看详情
如何在 axios 中为 POST - multipart/form-data 设置 MIME 类型？
】如何在axios中为POST-multipart/form-data设置MIME类型？【英文标题】：HowtosetMIMEtypeforPOST-multipart/form-datainaxios?【发布时间】：2019-08-2806:27:41【问题描述】：我需要使用MIME发送POST请求-multipart/form-data这是我对POST标头的默认配置：axios.d... 查看详情