React.js Проблема с аутентификацией, Даже если я получу токен

ProgramBox

React.js Проблема с аутентификацией, Даже если я получу токен

Post author:admin
Запись опубликована:8 января, 2022
Post category:Вопросы по программированию

#reactjs

Вопрос:

Я создаю сайт с базовой аутентификацией с помощью Spring. Я использую Redux. Я отправляю запрос на «/auth» в бэкэнде. После успешного входа в систему я получаю эти:

введите описание изображения здесь

Как вы можете видеть, я успешно вошел в систему.

Но я все еще не могу быть аутентифицирован. Я не обновлял страницу, я ничего не делал, но это вывод консоли. Кстати, почтальон работает нормально.

введите описание изображения здесь

Это часть apiCalls:

 import axios from "axios";

export const signup = (body) => {
      return  axios.post('/users', body);
};

export const login = creds => {
      return axios.post('/auth', {}, {auth:creds});
};
export const getMarketItemsSortByDate = () => {
      return axios.get("/market/last");
}

Это магазин настроек:

 import {createStore, applyMiddleware,compose} from 'redux';
import authReducer from './authReducer';
import SecureLS from 'secure-ls';
import thunk  from 'redux-thunk';
const secureLS = new SecureLS();


const getStateFromStorage = () => {
      const hoaxAuth = secureLS.get('hoax-auth');
        let stateInLocalStorage = {
            isLoggedIn:false,
            username:undefined,
            mail:undefined,
            balance:undefined,
            password:undefined
        };

        if(hoaxAuth){
             stateInLocalStorage =  hoaxAuth;
        }

        return stateInLocalStorage;
}

const updateStateInStorage = newState => {
      secureLS.set('hoax-auth', newState);
}

  const configureStore = () => {
        const initialState = getStateFromStorage();
        const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
        const store = createStore(authReducer, initialState, composeEnhancers(applyMiddleware(thunk)));
        store.subscribe(()=> {
              updateStateInStorage(store.getState());
        })
        return store;
  }

  export default configureStore;

Это авторизация :

 import * as ACTIONS from "./Constants";
import {login} from '../api/apiCalls';

export const logoutSuccess = () => {
      return {
            type: ACTIONS.LOGOUT_SUCCESS
      };
}

export const loginSuccess = authState => {
      return {
        type: ACTIONS.LOGIN_SUCCESS,
        payload: authState
      };
    };

    export const loginHandler = credentials => {
      return async function(dispatch) {
        const response = await login(credentials);
        const authState = {
          ...response.data,
          password: credentials.password,
        };
        console.log(authState);
        dispatch(loginSuccess(authState));
        return response;
      };
    };

И это authReducer:

 import * as ACTIONS from './Constants';

const defaultState = {
      isLoggedIn:false,
        username:undefined,
        mail:undefined,
        balance:undefined,
        password:undefined
    }
    
    const authReducer = (state= { ...defaultState},action) => {
      if(action.type === ACTIONS.LOGOUT_SUCCESS){
      return defaultState;
      } else if(action.type === ACTIONS.LOGIN_SUCCESS){
      return {
            ...action.payload,
            isLoggedIn:true
      }
      }
      return state;
    }

    export default authReducer;

С почтальоном все в порядке, так что проблема должна быть внутри React.js

1. Вы передаете в заголовок свой токен авторизации? Если да — то где в коде? Ваш код вызова api содержит только для входа в систему и входа в систему. Ничего для отправки других API в бэкэнд, как на картинке, market/last/ для чего требуется токен для авторизации.

2. Я не добавлял эти части

3. Проблема в вашем const getMarketItemsSortByDate методе apiCalls . Казалось бы, данные из URL <domain>/market/last -адреса доступны только для вошедшего в систему пользователя. В вашем случае — даже если пользователь вошел в систему и получил маркер авторизации, вы фактически не отправляете маркер авторизации обратно на сервер при запросе market/last URL. Таким образом, сервер думает, что вы не вошли в систему, и отправляет вам сообщение об ошибке 401.

4. Это должно выглядеть примерно так return axios.get("/market/last", {headers: {'Content-Type':'application/json','Acess-Control-Allow-Origin':'*','Accept': "application/json",'Authorization':'Bearer ' token}}); : ОБРАТИТЕ внимание, что токен-это токен, который вы получаете обратно с сервера (первое фото > заголовок >> авторизация: >><токен>). Таким образом, сервер сможет определить, кто вы такой. В вашем случае вам, возможно, потребуется изменить тип токена (с предъявителя) на тот, который вы используете, а также добавить/удалить заголовки. Это всего лишь пример

5. На главной странице есть некоторые элементы. Я просто хочу, чтобы их могли видеть только зарегистрированные пользователи. После успешного входа в систему он перенаправляется на домашнюю страницу, но там написано «несанкционированный». Должен ли я добавлять все эти параметры в каждый запрос?

Ответ №1:

Убедитесь withCredentials , что для каждого запроса, который вы сделали с помощью axios, требуется маркер как таковой:

 export const login = creds => {
      return axios.post('/auth', {}, {auth:creds, withCredentials:true});
};
export const getMarketItemsSortByDate = () => {
      return axios.get("/market/last", {}, {withCredentials:true});
}

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