fix: loggin out keeps refresh token in browser

fix: https://github.com/canove/whaticket/issues/106
This commit is contained in:
canove
2021-01-15 11:56:28 -03:00
parent e6e9ac213f
commit 74e17a9f04
8 changed files with 59 additions and 29 deletions

View File

@@ -1,6 +1,6 @@
import React, { createContext } from "react";
import useAuth from "./useAuth";
import useAuth from "../../hooks/useAuth.js";
const AuthContext = createContext();

View File

@@ -1,118 +0,0 @@
import { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
import openSocket from "socket.io-client";
import { toast } from "react-toastify";
import { i18n } from "../../translate/i18n";
import api from "../../services/api";
import toastError from "../../errors/toastError";
const useAuth = () => {
const history = useHistory();
const [isAuth, setIsAuth] = useState(false);
const [loading, setLoading] = useState(true);
const [user, setUser] = useState({});
api.interceptors.request.use(
config => {
const token = localStorage.getItem("token");
if (token) {
config.headers["Authorization"] = `Bearer ${JSON.parse(token)}`;
setIsAuth(true);
}
return config;
},
error => {
Promise.reject(error);
}
);
api.interceptors.response.use(
response => {
return response;
},
async error => {
const originalRequest = error.config;
if (error?.response?.status === 403 && !originalRequest._retry) {
originalRequest._retry = true;
const { data } = await api.post("/auth/refresh_token");
if (data) {
localStorage.setItem("token", JSON.stringify(data.token));
api.defaults.headers.Authorization = `Bearer ${data.token}`;
}
return api(originalRequest);
}
if (error?.response?.status === 401) {
localStorage.removeItem("token");
api.defaults.headers.Authorization = undefined;
setIsAuth(false);
}
return Promise.reject(error);
}
);
useEffect(() => {
const token = localStorage.getItem("token");
(async () => {
if (token) {
try {
const { data } = await api.post("/auth/refresh_token");
api.defaults.headers.Authorization = `Bearer ${data.token}`;
setIsAuth(true);
setUser(data.user);
} catch (err) {
toastError(err);
}
}
setLoading(false);
})();
}, []);
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
socket.on("user", data => {
if (data.action === "update" && data.user.id === user.id) {
setUser(data.user);
}
});
return () => {
socket.disconnect();
};
}, [user]);
const handleLogin = async userData => {
setLoading(true);
try {
const { data } = await api.post("/auth/login", userData);
localStorage.setItem("token", JSON.stringify(data.token));
api.defaults.headers.Authorization = `Bearer ${data.token}`;
setUser(data.user);
setIsAuth(true);
toast.success(i18n.t("auth.toasts.success"));
history.push("/tickets");
setLoading(false);
} catch (err) {
toastError(err);
setLoading(false);
}
};
const handleLogout = () => {
setLoading(true);
setIsAuth(false);
setUser({});
localStorage.removeItem("token");
api.defaults.headers.Authorization = undefined;
setLoading(false);
history.push("/login");
};
return { isAuth, user, loading, handleLogin, handleLogout };
};
export default useAuth;

View File

@@ -1,6 +1,6 @@
import React, { createContext } from "react";
import useWhatsApps from "./useWhatsApps";
import useWhatsApps from "../../hooks/useWhatsApps";
const WhatsAppsContext = createContext();

View File

@@ -1,104 +0,0 @@
import { useState, useEffect, useReducer } from "react";
import openSocket from "socket.io-client";
import toastError from "../../errors/toastError";
import api from "../../services/api";
const reducer = (state, action) => {
if (action.type === "LOAD_WHATSAPPS") {
const whatsApps = action.payload;
return [...whatsApps];
}
if (action.type === "UPDATE_WHATSAPPS") {
const whatsApp = action.payload;
const whatsAppIndex = state.findIndex(s => s.id === whatsApp.id);
if (whatsAppIndex !== -1) {
state[whatsAppIndex] = whatsApp;
return [...state];
} else {
return [whatsApp, ...state];
}
}
if (action.type === "UPDATE_SESSION") {
const whatsApp = action.payload;
const whatsAppIndex = state.findIndex(s => s.id === whatsApp.id);
if (whatsAppIndex !== -1) {
state[whatsAppIndex].status = whatsApp.status;
state[whatsAppIndex].updatedAt = whatsApp.updatedAt;
state[whatsAppIndex].qrcode = whatsApp.qrcode;
state[whatsAppIndex].retries = whatsApp.retries;
return [...state];
} else {
return [...state];
}
}
if (action.type === "DELETE_WHATSAPPS") {
const whatsAppId = action.payload;
const whatsAppIndex = state.findIndex(s => s.id === whatsAppId);
if (whatsAppIndex !== -1) {
state.splice(whatsAppIndex, 1);
}
return [...state];
}
if (action.type === "RESET") {
return [];
}
};
const useWhatsApps = () => {
const [whatsApps, dispatch] = useReducer(reducer, []);
const [loading, setLoading] = useState(true);
useEffect(() => {
setLoading(true);
const fetchSession = async () => {
try {
const { data } = await api.get("/whatsapp/");
dispatch({ type: "LOAD_WHATSAPPS", payload: data });
setLoading(false);
} catch (err) {
setLoading(false);
toastError(err);
}
};
fetchSession();
}, []);
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
socket.on("whatsapp", data => {
if (data.action === "update") {
dispatch({ type: "UPDATE_WHATSAPPS", payload: data.whatsapp });
}
});
socket.on("whatsapp", data => {
if (data.action === "delete") {
dispatch({ type: "DELETE_WHATSAPPS", payload: data.whatsappId });
}
});
socket.on("whatsappSession", data => {
if (data.action === "update") {
dispatch({ type: "UPDATE_SESSION", payload: data.session });
}
});
return () => {
socket.disconnect();
};
}, []);
return { whatsApps, loading };
};
export default useWhatsApps;