英文:
React-redux cannot get user information for the profile
问题
I am working on an e-commerce project(react, django) and register/login system is working well, but I when I started to work on update profile form, first I decided to get some info of the user. I am getting Authentication credentials were not provided error message.
In console, I am getting a 401 Unauthorized error: "GET /api/users/profile/ HTTP/1.1" 401 58.
userReducers.js:
export const userDetailsReducer = (state = { user: {} }, action) =>{
switch (action.type) {
case USER_DETAILS_REQUEST:
return { ...state, loading: true }
case USER_DETAILS_SUCCESS:
return { loading: false, user: action.payload }
case USER_DETAILS_FAIL:
return { loading: false, error: action.payload}
default:
return state
}
}
userActions.js:
export const getUserDetails = (id) => async (dispatch, getState) => {
try{
dispatch({
type: USER_DETAILS_REQUEST
})
const {
userLogin: { userInfo },
} = getState()
const token = userInfo.token
const config = {
headers:{
'Content-type': 'application/json',
Authorization: 'Bearer'+token,
}
}
const { data } = await axios.get(
'/api/users/'+id,
config
)
dispatch({
type: USER_DETAILS_SUCCESS,
payload: data
})
}catch(error){
dispatch({
type:USER_DETAILS_FAIL,
payload:error.response && error.response.data.detail
? error.response.data.detail
: error.message,
})
}
}
ProfileScreen.js:
import React, {useState, useEffect} from 'react'
import { Link, useNavigate, useParams, useLocation } from 'react-router-dom'
import { Form, Button, Row, Col } from 'react-bootstrap'
import { useDispatch, useSelector } from 'react-redux'
import Loader from '../components/Loader'
import Message from '../components/Message'
import { getUserDetails } from '../actions/userActions'
function ProfileScreen() {
const location = useLocation()
const navigate = useNavigate()
const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [confirmPassword, setConfirmPassword] = useState('')
const [message, setMessage] = useState('')
const dispatch = useDispatch()
const userDetails = useSelector(state => state.userDetails)
const { error, loading, user } = userDetails
const userLogin = useSelector(state => state.userLogin)
const { userInfo } = userLogin
useEffect(() => {
if (!userInfo){
navigate('/login')
} else {
if (!user || !user.name){
dispatch(getUserDetails('profile'))
} else {
setName(user.name)
setEmail(user.email)
}
}
}, [dispatch, navigate, userInfo, user])
const submitHandler = (e) => {
e.preventDefault()
if(password !== confirmPassword){
setMessage('Passwords do not match')
}else{
console.log('Updating...')
}
}
return (
<Row>
<Col me={3}>
<h2>User Profile</h2>
{message && <Message variant='danger'>{message}</Message>}
{error && <Message variant='danger'>{error}</Message>}
{loading && <Loader/>}
<Form onSubmit={submitHandler}>
<Form.Group controlId='email'>
<Form.Label>Email Address</Form.Label>
<Form.Control
required
type='email'
placeholder='Enter Email'
value={email}
onChange={(e) => setEmail(e.target.value)}
>
</Form.Control>
</Form.Group>
<Form.Group controlId='name'>
<Form.Label>Name</Form.Label>
<Form.Control
required
type='name'
placeholder='Enter Name'
value={name}
onChange={(e) => setName(e.target.value)}
>
</Form.Control>
</Form.Group>
<Form.Group controlId='password'>
<Form.Label>Password</Form.Label>
<Form.Control
type='password'
placeholder='Enter Password'
value={password}
onChange={(e) => setPassword(e.target.value)}
>
</Form.Control>
</Form.Group>
<Form.Group controlId='passwordConfirm'>
<Form.Label>Confirm Password</Form.Label>
<Form.Control
type='password'
placeholder='Confirm Password'
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
>
</Form.Control>
</Form.Group>
<Button type='submit' variant='primary'>Update</Button>
</Form>
</Col>
<Col me={9}>
<h2>My Orders</h2>
</Col>
</Row>
)
}
export default ProfileScreen
英文:
I am working on an e-commerce project(react, django) and register/login system is working well, but I when I started to work on update profile form, first I decided to get some info of the user. I am getting Authentication credentials were not provided error message.
In console i am getting a 401 Unauthorized error: "GET /api/users/profile/ HTTP/1.1"
401 58.
userReducers.js:
export const userDetailsReducer = (state = { user: {} }, action) =>{
switch (action.type) {
case USER_DETAILS_REQUEST:
return { ...state, loading: true }
case USER_DETAILS_SUCCESS:
return { loading: false, user: action.payload }
case USER_DETAILS_FAIL:
return { loading: false, error: action.payload}
default:
return state
}
}
userActions.js:
export const getUserDetails = (id) => async (dispatch, getState) => {
try{
dispatch({
type: USER_DETAILS_REQUEST
})
const {
userLogin: { userInfo },
} = getState()
const token = userInfo.token
const config = {
headers:{
'Content-type': 'application/json',
Authorization: 'Bearer'+token,
}
}
const { data } = await axios.get(
'/api/users/'+id,
config
)
dispatch({
type: USER_DETAILS_SUCCESS,
payload: data
})
}catch(error){
dispatch({
type:USER_DETAILS_FAIL,
payload:error.response && error.response.data.detail
? error.response.data.detail
: error.message,
})
}
}
ProfileScreen.js:
import React, {useState, useEffect} from 'react'
import { Link, useNavigate, useParams, useLocation } from 'react-router-dom'
import { Form, Button, Row, Col } from 'react-bootstrap'
import { useDispatch, useSelector } from 'react-redux'
import Loader from '../components/Loader'
import Message from '../components/Message'
import { getUserDetails } from '../actions/userActions'
function ProfileScreen() {
const location = useLocation()
const navigate = useNavigate()
const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [confirmPassword, setConfirmPassword] = useState('')
const [message, setMessage] = useState('')
const dispatch = useDispatch()
const userDetails = useSelector(state => state.userDetails)
const { error, loading, user } = userDetails
const userLogin = useSelector(state => state.userLogin)
const { userInfo } = userLogin
useEffect(() => {
if (!userInfo){
navigate('/login')
} else {
if (!user || !user.name){
dispatch(getUserDetails('profile'))
} else {
setName(user.name)
setEmail(user.email)
}
}
}, [dispatch, navigate, userInfo, user])
const submitHandler = (e) => {
e.preventDefault()
if(password !== confirmPassword){
setMessage('Passwords do not match')
}else{
console.log('Updating...')
}
}
return (
<Row>
<Col me={3}>
<h2>User Profile</h2>
{message && <Message variant='danger'>{message}</Message>}
{error && <Message variant='danger'>{error}</Message>}
{loading && <Loader/>}
<Form onSubmit={submitHandler}>
<Form.Group controlId='email'>
<Form.Label>Email Address</Form.Label>
<Form.Control
required
type='email'
placeholder='Enter Email'
value={email}
onChange={(e) => setEmail(e.target.value)}
>
</Form.Control>
</Form.Group>
<Form.Group controlId='name'>
<Form.Label>Name</Form.Label>
<Form.Control
required
type='name'
placeholder='Enter Name'
value={name}
onChange={(e) => setName(e.target.value)}
>
</Form.Control>
</Form.Group>
<Form.Group controlId='password'>
<Form.Label>Password</Form.Label>
<Form.Control
type='password'
placeholder='Enter Password'
value={password}
onChange={(e) => setPassword(e.target.value)}
>
</Form.Control>
</Form.Group>
<Form.Group controlId='passwordConfirm'>
<Form.Label>Confirm Password</Form.Label>
<Form.Control
type='password'
placeholder='Confirm Password'
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
>
</Form.Control>
</Form.Group>
<Button type='submit' variant='primary'>Update</Button>
</Form>
</Col>
<Col me={9}>
<h2>My Orders</h2>
</Col>
</Row>
)
}
export default ProfileScreen
答案1
得分: 1
将此更改:
Authorization: 'Bearer'+token,
为:
Authorization: 'Bearer ' + token,
在"Bearer"之后添加空格,然后再次尝试,看看错误是否消失。
英文:
Try change this
before:
Authorization: 'Bearer'+token,
**to: ** Authorization: 'Bearer ' + token,
Add space after "Bearer"
Then, try again and see if the error goes away.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论