0.1.85 • Published 3 years ago
use-jwt-manager v0.1.85
use-jwt-manager
1)Create a context
import React from 'react';
import { jwtManagerContext } from 'use-jwt-manager/dist/constants/types';
export const AuthConext = React.createContext<Partial<jwtManagerContext>>({});
2)Create an Interceptor (optional):
import axios from 'axios';
import { useContext, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import{ AuthConext } from '../contexts';
const useInterceptor = (): void => {
const context = useContext(AuthConext);
const history = useHistory();
useEffect(() => {
axios.interceptors.response.use(
(response) => response ,
(error) => {
const { status } = error.response;
if (status == 401) {
if (context.refresh_token) {
//@ts-ignore
context.refresh();
} else {
//@ts-ignore
context.logout().then(
()=> history.push('/login')
)
}
}
return Promise.reject(error);
}
);
}, []);
};
export default useInterceptor;
3)Wrap your application with the Context provider
export const Root: React.FC<{}> = ({}) => {
const config = { TOKEN_KEY, REFRESH_TOKEN_KEY };
const authContext = useJWT({ login, me, refresh, config });
useInterceptor();
return (
<AuthConext.Provider value={authContext}>
<Router>
<Switch>
<Route path="/login" component={Login} exact />
<PrivateRoute path="/" component={Home} exact />
</Switch>
</Router>
</AuthConext.Provider>
);
};
0.1.85
3 years ago
0.2.0
3 years ago
0.2.3
3 years ago
0.2.2
3 years ago
0.2.4
3 years ago
0.1.80
3 years ago
0.1.82
3 years ago
0.1.75
3 years ago
0.1.74
3 years ago
0.1.73
3 years ago
0.1.72
3 years ago
0.1.70
3 years ago
0.1.71
3 years ago
0.1.68
3 years ago
0.1.69
3 years ago
0.1.67
3 years ago
0.1.66
3 years ago
0.1.65
3 years ago
0.1.64
3 years ago
0.1.63
3 years ago
0.1.62
3 years ago
0.1.61
3 years ago
0.1.4
3 years ago
0.1.3
3 years ago
0.1.6
3 years ago
0.1.5
3 years ago
0.1.2
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago