nodejs/react-saas
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Validación de token existente en sessionStorage

Browse source
This commit is contained in:
Germán Enríquez 2024-07-28 13:17:54 -05:00
parent 9afc3b2bd0
commit 1d6b93c51c
18 changed files with 2044 additions and 1306 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2971
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

52
package.json
View file

@ -1,6 +1,6 @@
{
"name": "@chimera-pe/react-saas",
"version": "0.2.1",
"version": "0.3.0",
"type": "module",
"scripts": {
"dev": "vite",
@ -8,42 +8,38 @@
"lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.11",
"@mui/lab": "^5.0.0-alpha.166",
"@mui/material": "^5.15.11",
"@mui/x-date-pickers": "^6.19.5",
"@reduxjs/toolkit": "^2.2.1",
"axios": "^1.6.7",
"peerDependencies": {
"@emotion/react": "^11.13.0",
"@emotion/styled": "^11.13.0",
"@mui/icons-material": "^5.16.5",
"@mui/lab": "^5.0.0-alpha.171",
"@mui/material": "^5.16.5",
"@mui/x-date-pickers": "^7.11.1",
"@reduxjs/toolkit": "^2.2.7",
"axios": "^1.7.2",
"date-fns": "^2.30.0",
"final-form": "^4.20.10",
"jwt-decode": "^4.0.0",
"lodash": "^4.17.21",
"mui-rff": "^7.3.0",
"mui-rff": "^7.4.1",
"navigator-languages": "^2.0.2",
"node-polyglot": "^2.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"node-polyglot": "^2.6.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-final-form": "^6.5.9",
"react-polyglot": "^0.7.2",
"react-redux": "^9.1.0",
"react-router-dom": "^6.22.2"
},
"peerDependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-redux": "^9.1.2",
"react-router-dom": "^6.25.1"
},
"devDependencies": {
"@types/react": "^18.2.56",
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.56.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"vite": "^5.1.4"
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1",
"eslint": "^8.57.0",
"eslint-plugin-react": "^7.35.0",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.9",
"vite": "^5.3.5"
},
"description": "Componente integrador con SaaS",
"main": "./dist/react-saas.umd.cjs",

4
src/Constantes.js
View file

@ -1,2 +1,6 @@
export const saasURL="https://saas.chimera.com.pe/backend";
export const authURL="https://saas.chimera.com.pe/oauth";
export const TOKEN="saas-token";
export const TOKEN_EXPIRATION="saas-token-expiration";
export const REFRESH_TOKEN="saas-refresh-token";

35
src/hooks/useCheckLogin.jsx
View file

@ -1,24 +1,45 @@
import {useEffect} from "react";
import {useDispatch,useSelector} from "react-redux";
import {logout,refreshToken} from "../redux";
import {TOKEN,TOKEN_EXPIRATION,REFRESH_TOKEN} from "../Constantes";
import {login,logout,refreshToken} from "../redux";
const useCheckLogin=(devURL) => {
const dispatch=useDispatch();
const login = useSelector(store => store.login);
const loginStatus=useSelector(store => store.loginStatus);
const instancia=useSelector(store => store.aplicacion.instancia);
useEffect(() => {
if(login.autenticado && !!login.expiracion && new Date(login.expiracion) < new Date()){
if(login.refreshToken){
dispatch(refreshToken(devURL,instancia.clientCredentials,login.refreshToken));
if(loginStatus.autenticado){
if(!!loginStatus.expiracion && new Date(loginStatus.expiracion) < new Date()){
if(loginStatus.refreshToken){
dispatch(refreshToken(devURL,instancia.clientCredentials,loginStatus.refreshToken));
}
else{
dispatch(logout());
}
}
},[devURL,instancia.clientCredentials,login,dispatch]);
}
else{
const token=sessionStorage.getItem(TOKEN);
const expiracion=sessionStorage.getItem(TOKEN_EXPIRATION);
const refreshToken=sessionStorage.getItem(REFRESH_TOKEN);
if(token && expiracion){
if(new Date(expiracion) < new Date()){
if(refreshToken){
dispatch(refreshToken(devURL,instancia.clientCredentials,refreshToken));
}
else{
dispatch(logout());
}
}
else{
dispatch(login({token,expiracion,refreshToken}));
}
}
}
},[devURL,instancia.clientCredentials,loginStatus,dispatch]);
return login.autenticado;
return loginStatus.autenticado;
};
export default useCheckLogin;

2
src/redux/index.jsx
View file

@ -3,6 +3,7 @@ import {inicializar,getInstancia} from "./inicializarSlice";
import {
refreshToken,
requestToken,
login,
logout,
getPerfiles,
getToken,
@ -16,6 +17,7 @@ export {
inicializar,
refreshToken,
requestToken,
login,
logout,
mostrarNotificacion,
ocultarNotificacion,

46
src/redux/loginSlice.jsx
View file

@ -1,5 +1,6 @@
import {createSlice,createAsyncThunk} from "@reduxjs/toolkit";
import {loginApi} from "../api/loginApi";
import {TOKEN,TOKEN_EXPIRATION,REFRESH_TOKEN} from "../Constantes";
import {jwtDecode} from "jwt-decode";
const loginSlice=createSlice({
@ -15,6 +16,19 @@ const loginSlice = createSlice({
error: null
},
reducers: {
login: (state,action) => {
const token=action.payload.token;
const jwtToken=jwtDecode(token);
const expiracion=new Date();
expiracion.setSeconds(expiracion.getSeconds() + action.payload.expiracion);
state.cargando=false;
state.autenticado=true;
state.token=token;
state.refreshToken=action.payload.refreshToken;
state.expiracion=expiracion.getTime();
state.usuario=jwtToken.name;
state.perfiles=jwtToken.authorities;
},
logout: state => {
state.cargando=false;
state.autenticado=false;
@ -24,9 +38,9 @@ const loginSlice = createSlice({
state.usuario=null;
state.perfiles=[];
state.error=null;
sessionStorage.removeItem("saas-token");
sessionStorage.removeItem("saas-refresh-token");
sessionStorage.removeItem("saas-expiration");
sessionStorage.removeItem(TOKEN);
sessionStorage.removeItem(REFRESH_TOKEN);
sessionStorage.removeItem(TOKEN_EXPIRATION);
}
},
extraReducers(builder) {
@ -47,9 +61,9 @@ const loginSlice = createSlice({
state.expiracion=expiracion.getTime();
state.usuario=jwtToken.name;
state.perfiles=jwtToken.authorities;
sessionStorage.setItem("saas-token",token);
sessionStorage.setItem("saas-refresh-token",action.payload.refresh_token);
sessionStorage.setItem("saas-expiration",expiracion.getTime());
sessionStorage.setItem(TOKEN,token);
sessionStorage.setItem(REFRESH_TOKEN,action.payload.refresh_token);
sessionStorage.setItem(TOKEN_EXPIRATION,expiracion.getTime());
})
.addCase(requestToken.rejected,(state,action) => {
console.log(action);
@ -61,9 +75,9 @@ const loginSlice = createSlice({
state.usuario=null;
state.perfiles=[];
state.error=action.error?.message;
sessionStorage.removeItem("saas-token");
sessionStorage.removeItem("saas-refresh-token");
sessionStorage.removeItem("saas-expiration");
sessionStorage.removeItem(TOKEN);
sessionStorage.removeItem(REFRESH_TOKEN);
sessionStorage.removeItem(TOKEN_EXPIRATION);
})
.addCase(refreshToken.pending,state => {
state.cargando=true;
@ -74,9 +88,9 @@ const loginSlice = createSlice({
state.token=action.payload.access_token;
state.refreshToken=action.payload.refresh_token;
state.expiracion=expiracion.getTime();
sessionStorage.setItem("saas-token",action.payload.access_token);
sessionStorage.setItem("saas-refresh-token",action.payload.refresh_token);
sessionStorage.setItem("saas-expiration",expiracion.getTime());
sessionStorage.setItem(TOKEN,action.payload.access_token);
sessionStorage.setItem(REFRESH_TOKEN,action.payload.refresh_token);
sessionStorage.setItem(TOKEN_EXPIRATION,expiracion.getTime());
})
.addCase(refreshToken.rejected,(state,action) => {
state.cargando=false;
@ -87,9 +101,9 @@ const loginSlice = createSlice({
state.usuario=null;
state.perfiles=[];
state.error=action.error?.message;
sessionStorage.removeItem("saas-token");
sessionStorage.removeItem("saas-refresh-token");
sessionStorage.removeItem("saas-expiration");
sessionStorage.removeItem(TOKEN);
sessionStorage.removeItem(REFRESH_TOKEN);
sessionStorage.removeItem(TOKEN_EXPIRATION);
});
}
});
@ -104,7 +118,7 @@ export const refreshToken = createAsyncThunk("login/refreshToken",async (devURL,
return response.data;
});
export const {logout} = loginSlice.actions;
export const {login,logout}=loginSlice.actions;
export const getToken=state => state.login.token;