Ошибка запроса Ax ios?

Question

Я получил токен от входа в систему с помощью response redux, если я попытаюсь авторизовать его с помощью этого токена. ошибка отображается Axios request failed: TypeError: Cannot read property 'token' of undefined Я хочу авторизовать ее с помощью токена. токен хранится в localstorage, но он не может авторизовать его, когда я использую (Token ${props.token}, если я пытаюсь таким образом (Token 5302f4340a76cd80a855286c6d9e0e48d2f519cb}, тогда мой AritcleList. js авторизован, это

вот реакция -redux аутентификация

authAction. js

    import axios from 'axios';
    import * as actionTypes from './actionTypes';

    export const authStart = () => {
        return {
            type: actionTypes.AUTH_START
        }
    }

    export const authSuccess = token => {
        return {
            type: actionTypes.AUTH_SUCCESS,
            token: token
        }
    }

    export const authFail = error => {
        return {
            type: actionTypes.AUTH_FAIL,
            error: error
        }
    }

    export const logout = () => {
        localStorage.removeItem('token');
        return {
            type: actionTypes.AUTH_LOGOUT
        };
    }



    export const authLogin = (userData) => {
        return dispatch => {
            dispatch(authStart());
            axios.post('http://localhost:8000/rest-auth/login/', userData)
                .then(res => {
                    const token = res.data.key;
                    localStorage.setItem('token', token);
                    dispatch(authSuccess(token));
                })
                .catch(err => {
                    dispatch(authFail(err))
                })
        }
    }

authReducer. js

    import * as actionTypes from '../actions/actionTypes';
    import { updateObject } from '../utility';

    const initialState = {
        isAuthenticated: null,
        token: null,
        error: null,
        loading: false
    }

    const authStart = (state, action) => {
        return updateObject(state, {
            isAuthenticated: false,
            error: null,
            loading: true
        });
    }

    const authSuccess = (state, action) => {
        return updateObject(state, {
            isAuthenticated: true,
            token: action.token,
            error: null,
            loading: false
        });
    }

    const authFail = (state, action) => {
        return updateObject(state, {
            error: action.error,
            loading: false
        });
    }

    const authLogout = (state, action) => {
        return updateObject(state, {
            token: null
        });
    }

    export default function (state = initialState, action) {
        switch (action.type) {
            case actionTypes.AUTH_START: return authStart(state, action);
            case actionTypes.AUTH_SUCCESS: return authSuccess(state, action);
            case actionTypes.AUTH_FAIL: return authFail(state, action);
            case actionTypes.AUTH_LOGOUT: return authLogout(state, action);
            default:
                return state;
        }
    }

articleList. js

    import React, { useState, useEffect } from 'react';
    import { Container, Row, Col } from 'react-bootstrap';
    import Card from '../components/Card'
    import FullPageLoader from "../components/FullPageLoader";
    import axios from 'axios';
    import { connect } from 'react-redux'

    const NewsList = () => {
        const [items, setItems] = useState([])
        const [isLoading, setLoading] = useState(true)
        const [isAuthenticated, setAuth] = useState(true); //i don't know how to authenticate it when i also login

        useEffect((props) => {
            const fetchItems = async () => {
                try {
const config = {
                    headers: {
                        'Content-Type': 'application/json',
                        Authorization: `Token ${props.token}`
                    }
                }
                    const res = await axios.get(`${process.env.REACT_APP_API_URL}/api/`, config);
                    setItems(res.data)
                    setLoading(false);
                }
                catch (err) {
                    console.log(`? Axios request failed: ${err}`);
                }
            }
            fetchItems()
        })
        }, [items]);
        return (
            <Container className="mt-5">
                < div className="bread-header" >
                    <h5>Dashboard</h5>
                </div >
                <hr />
                <Row>
                    <Col sm={8}>
                        {
                            isLoading ? <FullPageLoader /> :
                                <div>
                                    {itemData.map((item, index) => (
                                        <Card key={index} item={item} isAuthenticated={isAuthenticated} ></Card>
                                    ))}
                                </div>
                        }
                    </Col>
                </Row>
            </Container >
        )
    }

    const mapStateToProps = (state) => {
        return {
            isAuthenticated: state.auth.token,
        }
    }
    export default connect(mapStateToProps)(NewsList)

Answer 1

Посмотрите на эту ветку: Отправка токена на предъявителя с помощью ax ios

Вам нужно добавить токен в запрос в качестве заголовка.