Django / React - JWT Auth: как сохранить токен в памяти ИЛИ использовать httpOnly cookie в запросе
Как я могу использовать токен доступа либо (1) сохраняя его в памяти, либо (2) используя httpOnly cookies в моем приложении React?
Контекст
Сейчас я совсем запутался в этом. Я использую dj-rest-auth
и djangorestframework-simplejwt
для аутентификации.
Когда я вызываю конечную точку входа из моего бэкенда, я получаю refresh_token
и access_token
+ set-cookie
для обоих. Это нормально.
Попытка 1
Когда я пытаюсь использовать маркер с заголовком Authorization
на другой странице, он не определяется. Это означает, что в моем AuthContextProvider
есть недостаток (возможно, потому что я использую переменную состояния, которая сбрасывает ее).
AuthContext
const AuthContext = React.createContext({
token: '',
isLoggedIn: false,
login: (token) => { },
logout: () => { },
refreshToken: () => { },
});
export const AuthContextProvider = (props) => {
const [token, setToken] = useState();
const userIsLoggedIn = !!token;
const loginHandler = (token) => {
setToken(token);
}
const logoutHandler = () => {
setToken(null)
}
const contextValue = {
token: token,
isLoggedIn: userIsLoggedIn,
login: loginHandler,
logout: logoutHandler,
}
return (
<AuthContext.Provider value={contextValue}>
{props.children}
</AuthContext.Provider>
);
};
export default AuthContext;
Используя authContext.token
(authContext
является локальной переменной из useContext
), маркер не определяется на любой другой странице.
Попытка 2
Ок, значит, токен не сохраняется в памяти, но куки должны быть установлены правильно? Позвольте мне сделать аутентифицированный запрос на следующей странице.
const response = await fetch(`protected_endpoint/`, {
method: 'GET',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
}
})
const data = await response.json()
return data
Нет, куки httpOnly не включены в запрос (проверяя его из моего браузера).