如何使用JavaScript Fetch API实现登录后页面跳转?
问题:Fetch请求后FastAPI返回的重定向未生效
我使用以下JavaScript代码获取Firebase Token,再通过JavaScript fetch()方法向FastAPI后端发送POST请求完成用户登录。后端验证Token有效后会返回RedirectResponse重定向至另一页面,但浏览器并未执行跳转,仍停留在原页面。
function loginGoogle() { var provider = new firebase.auth.GoogleAuthProvider(); firebase.auth() //.currentUser.getToken(provider) .signInWithPopup(provider) .then((result) => { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // This gives you a Google Access Token. You can use it to access the Google API. var token = credential.idToken; // The signed-in user info. var user = result.user; // ... }) .catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... }); firebase.auth().currentUser.getIdToken(true).then(function(idToken) { console.log(idToken) const token = idToken; const headers = new Headers({ 'x-auth-token': token }); const request = new Request('http://localhost:8000/login', { method: 'POST', headers: headers }); fetch(request) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); })
返回包含登录按钮和loginGoogle函数的登录页面的后端端点:
@router.get("/entrar") def login(request: Request): return templates.TemplateResponse("login.html", {"request": request})
调用上述POST端点后,会重定向至/1这个GET路由,使用的status_code为303,这是FastAPI文档中指定的从POST重定向到GET路由的方式:
@router.post("/login") async def login(x_auth_token: str = Header(None)): valid_token = auth.verify_id_token(x_auth_token) if valid_token: print("token validado") return RedirectResponse(url="/1", status_code=status.HTTP_303_SEE_OTHER) else: return {"msg": "Token no recibido"}
用户应被重定向到的GET端点(跳转未生效):
@app.get("/1") def get_landing(request: Request): return templates.TemplateResponse("landing.html", {"request": request})
测试/login端点的Swagger截图:
内容的提问来源于stack exchange,提问作者alvaroquin
相关产品推荐
相关产品推荐

