#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});
}
что позволяет установить маркер доступа и отправить его вместе с запросом.
Комментарии:
1. Я установил withCredentials , но, к сожалению, не сработало.
2. Что произойдет, если вы добавите
auth:creds
для запроса GET?