我正在嘗試根據狀態和從 API 服務器獲得的回應來更新標頭組件，但由于某種原因，我更新的狀態出現了某種我無法理解的錯誤。
當我的 API 服務器回應用戶名和密碼正確時，我會在瀏覽器上使用屬性（用戶名、密碼、令牌）獲取 console.log(response.data)。我可以登錄并且令牌保存在本地會話中......太棒了！但是，當我嘗試使用空白用戶名/密碼或任何不正確的資料登錄時，我的狀態評估為 true，因此 HeaderLoggedIn 組件激活（不遵循三元運算子規則集）/我的服務器以 console.log('Incorrect username /密碼。'）; 但 HeaderLoggedIn 仍然激活。
我的 useState()，最初設定為 Boolean(sessionStorage.getItem('movieappToken')。因此，如果沒有保存令牌，則其為 false，因此應該為 useState(false) - 渲染 HeaderLoggedOut 組件。
我究竟做錯了什么？謝謝
主要的 Header.js 組件：
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import HeaderLoggedOut from './HeaderLoggedOut';
import HeaderLoggedIn from './HeaderLoggedIn';
function Header() {
const [loggedIn, setLoggedIn] = useState(
Boolean(sessionStorage.getItem('movieappToken'))
);
return (
<header className="header-bar bg-primary mb-3">
<div className="container d-flex flex-column flex-md-row align-items-center p-3">
<h4 className="my-0 mr-md-auto font-weight-normal">
<Link to="/" className="text-white">
ComplexApp
</Link>
</h4>
**//here's the problem**
{loggedIn ? (
<HeaderLoggedIn setLoggedIn={setLoggedIn} />
) : (
<HeaderLoggedOut setLoggedIn={setLoggedIn} />
)}
</div>
</header>
);
}
export default Header;
HeaderLoggedIn.js 組件：
import React, { useEffect } from 'react';
function HeaderLoggedIn(props) {
function handleLogout() {
props.setLoggedIn(false);
sessionStorage.removeItem('movieappToken');
sessionStorage.removeItem('movieappUsername');
}
return (
<div className="flex-row my-3 my-md-0">
<a href="#" className="text-white mr-2 header-search-icon">
<i className="fas fa-search"></i>
</a>
<span className="mr-2 header-chat-icon text-white">
<i className="fas fa-comment"></i>
<span className="chat-count-badge text-white"> </span>
</span>
<a href="#" className="mr-2">
<img
className="small-header-avatar"
src={sessionStorage.getItem('complexappAvatar')}
/>
</a>
<a className="btn btn-sm btn-success mr-2" href="/create-post">
Create Post
</a>
<button onClick={handleLogout} className="btn btn-sm btn-secondary">
Sign Out
</button>
</div>
);
}
export default HeaderLoggedIn;
和 HeaderLoggedOut.js 組件 - 從 API 服務器獲取資料的組件
import React, { useEffect, useState } from 'react';
import Axios from 'axios';
function HeaderLoggedOut(props) {
const [username, setUsername] = useState();
const [password, setPassword] = useState();
async function handleSubmit(e) {
e.preventDefault();
try {
const response = await Axios.post('http://localhost:4000/login', {
username,
password,
});
if (response.data) {
console.log(response.data);
sessionStorage.setItem('movieappToken', response.data.token);
sessionStorage.setItem('movieappUsername', response.data.username);
props.setLoggedIn(true);
} else {
console.log('Incorrect username / password.');
}
} catch (e) {
console.log('There was a problem.');
}
}
return (
<form onSubmit={handleSubmit} className="mb-0 pt-2 pt-md-0">
<div className="row align-items-center">
<div className="col-md mr-0 pr-md-0 mb-3 mb-md-0">
<input
onChange={(e) => setUsername(e.target.value)}
name="username"
className="form-control form-control-sm input-dark"
type="text"
placeholder="Username"
autoComplete="off"
/>
</div>
<div className="col-md mr-0 pr-md-0 mb-3 mb-md-0">
<input
onChange={(e) => setPassword(e.target.value)}
name="password"
className="form-control form-control-sm input-dark"
type="password"
placeholder="Password"
/>
</div>
<div className="col-md-auto">
<button className="btn btn-success btn-sm">Sign In</button>
</div>
</div>
</form>
);
}
export default HeaderLoggedOut;
API 服務器 userController.js
const User = require('../models/User');
//
exports.login = function (req, res) {
let user = new User(req.body);
user
.login()
.then(function (result) {
res.send(result);
})
.catch(function (error) {
res.send(error);
});
};
API 服務器用戶.js
const usersCollection = require('../db').collection('users');
const bcrypt = require('bcryptjs');
const validator = require('validator');
let User = function (data) {
this.data = data;
this.errors = [];
};
User.prototype.cleanUp = function () {
if (typeof this.data.username != 'string') {
this.data.username = '';
}
if (typeof this.data.email != 'string') {
this.data.email = '';
}
if (typeof this.data.password != 'string') {
this.data.password = '';
}
// get rid of any bogus properties
this.data = {
username: this.data.username.trim().toLowerCase(),
email: this.data.email.trim().toLowerCase(),
password: this.data.password,
token: `58158188ji4j1ij42jio4j1ji41oji14i${this.data.username}`,
};
};
User.prototype.validate = function () {
if (this.data.username == '') {
this.errors.push('You must provide a username');
}
if (
this.data.username != '' &&
!validator.isAlphanumeric(this.data.username)
) {
this.errors.push('Username can only contain letters and numbers');
}
if (!validator.isEmail(this.data.email)) {
this.errors.push('You must provide a valid email address');
}
if (this.data.password == '') {
this.errors.push('You must provide a password');
}
if (this.data.password.length > 0 && this.data.password.length < 7) {
this.errors.push('Password must be at atleast 7 characters');
}
if (this.data.password.length > 25) {
this.errors.push('Password cannot exceed 25 characters');
}
if (this.data.username.length > 0 && this.data.username.length < 3) {
this.errors.push('Username must be at atleast 3 characters');
}
if (this.data.username.length > 15) {
this.errors.push('Username cannot exceed 15 characters');
}
};
User.prototype.register = function () {
// Step #1: Validate user data
this.cleanUp();
this.validate();
// Step #2: Only if there are no validation errors
// then save the user data into a database
if (!this.errors.length) {
// hash user password
let salt = bcrypt.genSaltSync(10);
this.data.password = bcrypt.hashSync(this.data.password, salt);
usersCollection.insertOne(this.data);
}
};
User.prototype.login = function () {
return new Promise((resolve, reject) => {
this.cleanUp();
usersCollection
.findOne({ username: this.data.username })
.then((attemptedUser) => {
if (
attemptedUser &&
bcrypt.compareSync(this.data.password, attemptedUser.password)
) {
resolve(this.data);
} else {
reject('invalid username/password');
}
})
.catch(function () {
reject('Please try again later!');
});
});
};
module.exports = User;
uj5u.com熱心網友回復：
無論您的服務器回應如何this.data，invalid username/password或者Please try again later!，它本質上只是回應一個字串或一個物件。所以總會進入第一個判斷
if (response.data) {
console.log(response.data);
sessionStorage.setItem('movieappToken', response.data.token);
sessionStorage.setItem('movieappUsername', response.data.username);
props.setLoggedIn(true);
}我認為你可以添加另一個屬性code來幫助你判斷。
if (response.data) {
console.log(response.data);
if (response.data.code === 200) {
sessionStorage.setItem('movieappToken', response.data.token);
sessionStorage.setItem('movieappUsername', response.data.username);
props.setLoggedIn(true);
} else {
props.setLoggedIn(false);
}
}uj5u.com熱心網友回復：
loggedIn當收到“不正確的用戶名/密碼”回應時，您沒有進行設定，因此loggedIn保持最初的狀態。您可以將其設定為false
if (response.data) {
console.log(response.data);
sessionStorage.setItem('movieappToken', response.data.token);
sessionStorage.setItem('movieappUsername', response.data.username);
props.setLoggedIn(true);
} else {
props.setLoggedIn(false);
console.log('Incorrect username / password.');
} catch (e) {
props.setLoggedIn(false);
console.log('There was a problem.');
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/405304.html
標籤：