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", "name": "@chimera-pe/react-saas",
"version": "0.2.1", "version": "0.3.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
@ -8,42 +8,38 @@
"lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0", "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "peerDependencies": {
"@emotion/react": "^11.11.4", "@emotion/react": "^11.13.0",
"@emotion/styled": "^11.11.0", "@emotion/styled": "^11.13.0",
"@mui/icons-material": "^5.15.11", "@mui/icons-material": "^5.16.5",
"@mui/lab": "^5.0.0-alpha.166", "@mui/lab": "^5.0.0-alpha.171",
"@mui/material": "^5.15.11", "@mui/material": "^5.16.5",
"@mui/x-date-pickers": "^6.19.5", "@mui/x-date-pickers": "^7.11.1",
"@reduxjs/toolkit": "^2.2.1", "@reduxjs/toolkit": "^2.2.7",
"axios": "^1.6.7", "axios": "^1.7.2",
"date-fns": "^2.30.0", "date-fns": "^2.30.0",
"final-form": "^4.20.10", "final-form": "^4.20.10",
"jwt-decode": "^4.0.0", "jwt-decode": "^4.0.0",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"mui-rff": "^7.3.0", "mui-rff": "^7.4.1",
"navigator-languages": "^2.0.2", "navigator-languages": "^2.0.2",
"node-polyglot": "^2.5.0", "node-polyglot": "^2.6.0",
"react": "^18.2.0", "react": "^18.3.1",
"react-dom": "^18.2.0", "react-dom": "^18.3.1",
"react-final-form": "^6.5.9", "react-final-form": "^6.5.9",
"react-polyglot": "^0.7.2", "react-polyglot": "^0.7.2",
"react-redux": "^9.1.0", "react-redux": "^9.1.2",
"react-router-dom": "^6.22.2" "react-router-dom": "^6.25.1"
},
"peerDependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.2.56", "@types/react": "^18.3.3",
"@types/react-dom": "^18.2.19", "@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.2.1", "@vitejs/plugin-react": "^4.3.1",
"eslint": "^8.56.0", "eslint": "^8.57.0",
"eslint-plugin-react": "^7.33.2", "eslint-plugin-react": "^7.35.0",
"eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.5", "eslint-plugin-react-refresh": "^0.4.9",
"vite": "^5.1.4" "vite": "^5.3.5"
}, },
"description": "Componente integrador con SaaS", "description": "Componente integrador con SaaS",
"main": "./dist/react-saas.umd.cjs", "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 saasURL="https://saas.chimera.com.pe/backend";
export const authURL="https://saas.chimera.com.pe/oauth"; 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 {useEffect} from "react";
import {useDispatch,useSelector} from "react-redux"; 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 useCheckLogin=(devURL) => {
const dispatch=useDispatch(); const dispatch=useDispatch();
const login = useSelector(store => store.login); const loginStatus=useSelector(store => store.loginStatus);
const instancia=useSelector(store => store.aplicacion.instancia); const instancia=useSelector(store => store.aplicacion.instancia);
useEffect(() => { useEffect(() => {
if(login.autenticado && !!login.expiracion && new Date(login.expiracion) < new Date()){ if(loginStatus.autenticado){
if(login.refreshToken){ if(!!loginStatus.expiracion && new Date(loginStatus.expiracion) < new Date()){
dispatch(refreshToken(devURL,instancia.clientCredentials,login.refreshToken)); if(loginStatus.refreshToken){
dispatch(refreshToken(devURL,instancia.clientCredentials,loginStatus.refreshToken));
} }
else{ else{
dispatch(logout()); 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; export default useCheckLogin;

2
src/redux/index.jsx
View file

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

46
src/redux/loginSlice.jsx
View file

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