Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 24.11.2022, 23:43   #1
Ste11
Новичок
Джуниор
 
Регистрация: 24.11.2022
Сообщений: 3
Сообщение Как исправить 401 (Unauthorized)?

Здравствуйте, сделал jwt авторизацию и регистрацию. Но при проверки авторизированный ли пользователь выдаёт 401 Unauthorized отправлял через axios запрос на получение refresh токена(react/redux)
Вот action проверки на авторизацию
Код:
export const checkAuth = () => {

    try {
        return async dispatch => {
            const response = await axios.get(`http://localhost:5000/api/refresh`, {withCredentials: true})

            //console.log(response)

            dispatch({
                type: SET_USER,
                payload: response.data
            })

        }
    } catch (e) {
        console.log(e.response?.data?.message);
    }


}
вот reducer
Код:
import {LOGOUT, SET_USER} from "../types";

const initialState = {
    currentUser: {},
    isAuth: false
}

export const authReducer = (state = initialState, action) => {
    switch (action.type) {
        case SET_USER:
            localStorage.setItem('token', action.payload.accessToken);
            return {
                ...state,
                currentUser: action.payload,
                isAuth: true
            }
        case LOGOUT:
            localStorage.removeItem('token')
            return {
                ...state,
                currentUser: {},
                isAuth: false
            }
        default:
            return state
    }
}

export const logout = () => ({type: LOGOUT})
Вот компонент app
Код:
import './App.css';
import {Route, Routes} from "react-router-dom";
import LoginForm from "./component/LoginForm";
import {useDispatch, useSelector} from "react-redux";
import RegisterForm from "./component/RegisterForm";
import {useEffect} from "react";
import {checkAuth} from "./redux/action";

function App() {
    const users = useSelector(state => {
        const {authReducer} = state
        return authReducer
    })

    const dispatch = useDispatch()

    //console.log(users)

    useEffect(() => {

        checkAuth() // здесь делал и dispatch()
    }, [])


    if (!users.isAuth) {
        return (<div>
            <Routes>
                <Route path="/registration" element={<RegisterForm/>}/>
                <Route path="/login" element={<LoginForm/>}/>
            </Routes>
        </div>)
    }

    console.log(users.currentUser)

    return (
        <div className="App">
            {users.isAuth ? users.currentUser.rows.map(data => <div key={data.id}>{data.email}</div>) : 'авторизуйтесь'}
        </div>
    );
}

export default App;
Вот настройки axios, но я пробовал и через fetch() результат тот же (401)
Код:
import axios from "axios";

export const API_URL = `http://localhost:5000/api`

const $api = axios.create({
    withCredentials: true,
    baseURL: API_URL
})

$api.interceptors.request.use((config) => {
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`
    return config;
})

$api.interceptors.response.use((config) => {
    return config;
},async (error) => {
    const originalRequest = error.config;
    if (error.response.status == 401 && error.config && !error.config._isRetry) {
        originalRequest._isRetry = true;
        try {
            const response = await axios.get(`${API_URL}/refresh`, {withCredentials: true})
            localStorage.setItem('token', response.data.accessToken);
            return $api.request(originalRequest);
        } catch (e) {
            console.log('НЕ АВТОРИЗОВАН')
        }
    }
    throw error;
})

export default $api;
На сервере установил cors вызываю так
Код:
app.use(cors()) // Use this after the variable declaration / пробовал такие настройки, не помогло  {credentials: true, origin: 'http://localhost:3000'}
Пробовал на сервере(node js/express) сделать так
Код:
app.options('*', cors())
Почему то вылазит 401 ошибка, хотя в postman все работает!
Почему уже не знаю!???
Ste11 вне форума Ответить с цитированием
Старый 23.05.2023, 14:19   #2
Килобайт
Новичок
Пользователь
 
Регистрация: 23.05.2023
Сообщений: 13
Лампочка

В коде
Цитата:
action
проверки на авторизацию не указан заголовок
Цитата:
`Authorization`
с токеном доступа. Необходимо добавить этот заголовок к запросу. Для этого можно использовать интерсептор в настройках
Цитата:
axios
.

Также, в коде компонента
Цитата:
`App`
вызов функции
Цитата:
`checkAuth`
не является диспатчем. Необходимо добавить его перед вызовом
Цитата:
`checkAuth`
.

Также, в настройках
Цитата:
axios
в интерсепторе ответа необходимо изменить
Цитата:
`axios`
на
Цитата:
`$api`
.

Исправленный код:
Код:
export const checkAuth = () => {
  try {
    return async dispatch => {
      const response = await axios.get(`http://localhost:5000/api/refresh`, {withCredentials:true, headers: {Authorization: `Bearer ${localStorage.getItem('token')}`}});
      dispatch({
        type: SET_USER,
        payload: response.data
      });
    }
  } catch (e) {
    console.log(e.response?.data?.message);
  }
}

function App() {
  const users = useSelector(state => {
    const {authReducer} = state
    return authReducer
  })

  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(checkAuth())
  }, [dispatch])

  if (!users.isAuth) {
    return (
      <div>
        <Routes>
          <Route path="/registration" element={<RegisterForm/>}/>
          <Route path="/login" element={<LoginForm/>}/>
        </Routes>
      </div>
    )
  }

  console.log(users.currentUser)

  return (
    <div className="App">
      {users.isAuth ? users.currentUser.rows.map(data => <div key={data.id}>{data.email}</div>) : 'авторизуйтесь'}
    </div>
  );
}

$api.interceptors.response.use((config) => {
  return config;
}, async (error) => {
  const originalRequest = error.config;
  if (error.response.status == 401 && error.config && !error.config._isRetry) {
    originalRequest._isRetry = true;
    try {
      const response = await $api.get(`${API_URL}/refresh`, {withCredentials: true, headers: {Authorization: `Bearer ${localStorage.getItem('token')}`}})
      localStorage.setItem('token', response.data.accessToken);
      return $api.request(originalRequest);
    } catch (e) {
      console.log('НЕ АВТОРИЗОВАН')
    }
  }
  throw error;
});

export default $api;
Килобайт вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Исправить код UKRtortik Общие вопросы Delphi 1 02.04.2014 20:58
исправить код mishammm Помощь студентам 4 24.09.2013 01:54
Как получить заголовок из HTTP/1.0 401 Unauthorized? -=ATT=- Общие вопросы Delphi 2 16.12.2012 10:24
как исправить! lexinvest Операционные системы общие вопросы 1 08.05.2011 18:03
исправить код seed92 Помощь студентам 0 21.02.2011 16:02