Skip to content
Snippets Groups Projects
Commit 9ec8769e authored by METTER-ROTHAN Jérémie's avatar METTER-ROTHAN Jérémie
Browse files

fix(ui): move req intercepter

parent 3900e0c0
Branches
No related merge requests found
......@@ -15,17 +15,15 @@ function App() {
useAuthInterceptors();
return (
<>
<Routes>
<Route path="login" element={<LoginView />} />
<Route element={<AuthGuard />}>
<Route path="feed" element={<FeedView />} />
<Route path="discover" element={<DiscoverView />} />
<Route path="post/:id" element={<PostView />} />
</Route>
<Route path="*" element={<Navigate to="feed" />} />
</Routes>
</>
<Routes>
<Route path="login" element={<LoginView />} />
<Route element={<AuthGuard />}>
<Route path="feed" element={<FeedView />} />
<Route path="discover" element={<DiscoverView />} />
<Route path="post/:id" element={<PostView />} />
</Route>
<Route path="*" element={<Navigate to="feed" />} />
</Routes>
);
}
......
......@@ -3,29 +3,13 @@ import { useEffect } from 'react';
import { logoutAsync } from '../redux/auth/thunks';
import instalikeApi, { ACCESS_TOKEN_KEY } from '../instalikeApi';
import instalikeApi from '../instalikeApi';
import useAppDispatch from './useAppDispatch';
const useAuthInterceptors = () => {
const dispatch = useAppDispatch();
useEffect(() => {
const reqId = instalikeApi.driver.interceptors.request.use((config) => {
const accessToken = window.localStorage.getItem(ACCESS_TOKEN_KEY);
if (accessToken !== null) {
return {
...config,
headers: {
...config.headers,
Authorization: `Bearer ${accessToken}`,
},
};
}
return config;
});
const resId = instalikeApi.driver.interceptors.response.use(
(response) => response,
(e) => {
......@@ -38,7 +22,6 @@ const useAuthInterceptors = () => {
);
return () => {
instalikeApi.driver.interceptors.request.eject(reqId);
instalikeApi.driver.interceptors.response.eject(resId);
};
}, [dispatch]);
......
......@@ -13,6 +13,22 @@ const instalikeApi = createInstalikeApi(
})
);
instalikeApi.driver.interceptors.request.use((config) => {
const accessToken = window.localStorage.getItem(ACCESS_TOKEN_KEY);
if (accessToken !== null) {
return {
...config,
headers: {
...config.headers,
Authorization: `Bearer ${accessToken}`,
},
};
}
return config;
});
export const hasAccessToken = () => window.localStorage.getItem(ACCESS_TOKEN_KEY) !== null;
export default instalikeApi;
import { useEffect } from 'react';
import instalikeApi from '../instalikeApi';
const DiscoverView = () => {
useEffect(() => {
instalikeApi.posts.fetch({ cursor: null });
instalikeApi.users.me.fetch();
instalikeApi.users.find(1).fetch();
}, []);
return <>Discover</>;
};
......
import { useEffect } from 'react';
import instalikeApi from '../instalikeApi';
const FeedView = () => {
useEffect(() => {
console.log('fetch');
instalikeApi.posts.fetch({ cursor: null });
instalikeApi.users.me.fetch();
instalikeApi.users.find(1).fetch();
}, []);
return <>Feed</>;
};
......
import { Navigate } from 'react-router-dom';
import { loginAsync } from '../redux/auth/thunks';
import useAppDispatch from '../hooks/useAppDispatch';
import useIsAuth from '../hooks/useIsAuth';
const LoginView = () => {
return <>Login</>;
const dispatch = useAppDispatch();
const isAuth = useIsAuth();
if (isAuth) {
return <Navigate to="/feed" />;
}
return (
<>
<button
type="button"
onClick={() => {
dispatch(loginAsync('j.metterrothan@unistra.fr', 'DWEB2023'));
}}
>
Login
</button>
</>
);
};
export default LoginView;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment