fixed token

This commit is contained in:
Maciek Głowacki 2021-01-05 21:05:16 +01:00
parent 72782880c0
commit 782dbf7218
4 changed files with 36 additions and 13 deletions

View File

@ -1,4 +1,4 @@
import React, { ElementType, useContext, useState } from 'react';
import React, { ElementType, useContext, useEffect, useState } from 'react';
import Topbar from './Topbar';
import { Transfer } from './Transfer';
import { Admin } from './Admin';
@ -8,6 +8,7 @@ import styled from 'styled-components';
import { coursesContext } from '../contexts/CoursesProvider';
import LoadingOverlay from 'react-loading-overlay';
import { SyncLoader } from 'react-spinners';
import { CASContext } from '../contexts/CASProvider';
const Wrapper = styled.div`
display: flex;
height: calc(100vh - 80px);
@ -19,17 +20,21 @@ const Wrapper = styled.div`
export const App = () => {
const { isDataLoading } = useContext(coursesContext)!;
const { isFetchingToken, user, role } = useContext(CASContext)!;
const [isOpenTransfer, setOpenTransfer] = useState(false);
const handleTransfer = () => {
const handleTransfer = () => {
setOpenTransfer(!isOpenTransfer);
};
const userPrivilige = localStorage.getItem('userPrivilige');
console.log('role of that user is: ', role);
useEffect(() => {
console.log('is fetching token: ', isFetchingToken);
}, [isFetchingToken]);
return (
<>
<LoadingOverlay active={isDataLoading} spinner={<SyncLoader />}>
<LoadingOverlay active={role === undefined} spinner={<SyncLoader />}>
<Topbar handleTransfer={handleTransfer} />
<Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
<Wrapper>
@ -38,9 +43,8 @@ export const App = () => {
<Scheduler />
<Rightbar />
</>
)} { userPrivilige === 'DEANERY' && (
<Admin />
)}
)}{' '}
{userPrivilige === 'DEANERY' && <Admin />}
</Wrapper>
</LoadingOverlay>
</>

View File

@ -1,4 +1,4 @@
import React, { useState, MouseEvent, ChangeEvent, useEffect, useCallback, useContext } from 'react';
import React, { useState, MouseEvent, ChangeEvent, useEffect, useCallback, useContext, useRef } from 'react';
import { ReactComponent as Close } from '../assets/close.svg';
import ProfileIcon from '../assets/account.svg';
import { Profile } from './Profile';
@ -9,6 +9,8 @@ import styled from 'styled-components/macro';
import ClickAwayListener from 'react-click-away-listener';
import { SelectMenu } from './SelectMenu';
import { studentsContext } from '../contexts/StudentsProvider';
import { CASContext } from '../contexts/CASProvider';
import { render } from 'react-dom';
const Topbar = styled.div`
background-color: #e3e5ed;
@ -137,14 +139,18 @@ interface TopbarProps {
}
export default function ({ handleTransfer }: TopbarProps) {
const userPrivilige = localStorage.getItem('userPrivilige');
const { selectedStudent } = useContext(studentsContext)!;
const { role } = useContext(CASContext)!;
const [clearInput, setClearInput] = useState(false);
const [isPolish, setIsPolish] = useState(false);
const [anchorEl, setAnchorEl] = useState<HTMLImageElement | null>(null);
const [open, setOpen] = useState(false);
const [input, setInput] = useState('');
const [selectedOption, setSelectedOption] = useState('przedmioty');
const [selectedOption, setSelectedOption] = useState(role === 'STUDENT' ? 'przedmioty' : 'studenci');
useEffect(() => {
role && setSelectedOption(role === 'STUDENT' ? 'przedmioty' : 'studenci');
}, [role]);
const changeSelectedOption = (option: string) => setSelectedOption(option);
@ -178,14 +184,14 @@ export default function ({ handleTransfer }: TopbarProps) {
<FlexboxColumn>
<ClickAwayListener onClickAway={handleCloseDropdown}>
<Flexbox>
{userPrivilige !== 'STUDENT' && (
{role !== 'STUDENT' && (
<SelectMenu
changeSelectedOption={changeSelectedOption}
selectedOption={selectedOption}
changeDropdownOpen={setOpen}
/>
)}
<InputWrapper isStudent={userPrivilige === 'STUDENT'}>
<InputWrapper isStudent={role === 'STUDENT'}>
<Input
placeholder={`Wyszukaj ${selectedOption === 'studenci' ? 'studentów...' : 'przedmioty...'}`}
onChange={handleChange}

View File

@ -7,6 +7,8 @@ export interface CASContext {
logout: () => void;
token: string | undefined;
refreshToken: string | undefined;
isFetchingToken: boolean;
role: string | undefined;
}
export const CASContext = createContext<CASContext | undefined>(undefined);
@ -19,6 +21,8 @@ export const CASProvider = ({ children }: CASProviderProps) => {
const [user, setUser] = useState<LoggedUser>();
const [token, setToken] = useState<string | undefined>();
const [refreshToken, setRefreshToken] = useState<string | undefined>();
const [role, setRole] = useState<string | undefined>(undefined);
const [isFetchingToken, setIsFetchingToken] = useState(false);
useEffect(() => {
const login = async () => {
const urlParams = new URLSearchParams(window.location.search);
@ -28,6 +32,7 @@ export const CASProvider = ({ children }: CASProviderProps) => {
}
try {
if (!localStorage.getItem('userToken')) {
setIsFetchingToken(true);
const { data: user } = await axiosInstance.get<LoggedUser & { token: string; refreshToken: string }>(
`${process.env.REACT_APP_API_URL}/token?ticket=${ticket}`,
);
@ -36,11 +41,14 @@ export const CASProvider = ({ children }: CASProviderProps) => {
localStorage.setItem('userToken', user.token);
localStorage.setItem('userPrivilige', user.authorityRole);
localStorage.setItem('refreshToken', user.refreshToken);
setIsFetchingToken(false);
}
const token = localStorage.getItem('userToken');
const refreshToken = localStorage.getItem('refreshToken');
const role = localStorage.getItem('userPrivilige');
token && setToken(token);
refreshToken && setRefreshToken(refreshToken);
role && setRole(role);
} catch (e) {
console.log(e);
}
@ -63,5 +71,9 @@ export const CASProvider = ({ children }: CASProviderProps) => {
window.location.replace(`https://cas.amu.edu.pl/cas/login?service=${window.origin}&locale=pl`);
}
return <CASContext.Provider value={{ user, token, refreshToken, logout }}>{children}</CASContext.Provider>;
return (
<CASContext.Provider value={{ user, token, refreshToken, logout, isFetchingToken, role }}>
{children}
</CASContext.Provider>
);
};

View File

@ -37,6 +37,7 @@ axiosInstance.interceptors.response.use(
},
async (error) => {
const originalRequest = error.config;
console.log("original request is: ", originalRequest)
if (error.response.status === 403 && !originalRequest._retry) {
originalRequest._retry = true;
const access_token = await getNewTokens();