fixed remember me token issue

This commit is contained in:
Yinyin Liu 2026-03-10 08:50:46 +01:00
parent f381f034d3
commit 7f972d13c3
7 changed files with 33 additions and 27 deletions

View File

@ -13,7 +13,7 @@ const axiosConfig = axios.create({
axiosConfig.defaults.params = {}; axiosConfig.defaults.params = {};
axiosConfig.interceptors.request.use( axiosConfig.interceptors.request.use(
(config) => { (config) => {
const tokenString = localStorage.getItem('token'); const tokenString = localStorage.getItem('token') || sessionStorage.getItem('token');
const token = tokenString !== null ? tokenString : ''; const token = tokenString !== null ? tokenString : '';
if (token) { if (token) {
config.params['authToken'] = token; config.params['authToken'] = token;

View File

@ -23,7 +23,6 @@ import { FormattedMessage, useIntl } from 'react-intl';
function ResetPassword() { function ResetPassword() {
const [username, setUsername] = useState(''); const [username, setUsername] = useState('');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [rememberMe, setRememberMe] = useState(false);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const intl = useIntl(); const intl = useIntl();
const theme = useTheme(); const theme = useTheme();

View File

@ -23,7 +23,6 @@ import { FormattedMessage, useIntl } from 'react-intl';
function SetNewPassword() { function SetNewPassword() {
const [username, setUsername] = useState(''); const [username, setUsername] = useState('');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [rememberMe, setRememberMe] = useState(false);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const intl = useIntl(); const intl = useIntl();
const theme = useTheme(); const theme = useTheme();

View File

@ -17,7 +17,6 @@ import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
import Link from '@mui/material/Link'; import Link from '@mui/material/Link';
import inescologo from 'src/Resources/Logo.svg'; import inescologo from 'src/Resources/Logo.svg';
import { axiosConfigWithoutToken } from 'src/Resources/axiosConfig'; import { axiosConfigWithoutToken } from 'src/Resources/axiosConfig';
import Cookies from 'universal-cookie';
import { UserContext } from 'src/contexts/userContext'; import { UserContext } from 'src/contexts/userContext';
import { TokenContext } from 'src/contexts/tokenContext'; import { TokenContext } from 'src/contexts/tokenContext';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
@ -54,7 +53,6 @@ function Login() {
const { currentUser, setUser, removeUser } = context; const { currentUser, setUser, removeUser } = context;
const tokencontext = useContext(TokenContext); const tokencontext = useContext(TokenContext);
const { token, setNewToken, removeToken } = tokencontext; const { token, setNewToken, removeToken } = tokencontext;
const cookies = new Cookies();
const handleUsernameChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handleUsernameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setUsername(event.target.value); setUsername(event.target.value);
@ -80,19 +78,14 @@ function Login() {
if (response.data && response.data.token) { if (response.data && response.data.token) {
setLoading(false); setLoading(false);
setNewToken(response.data.token); setNewToken(response.data.token, rememberMe);
setUser(response.data.user); setUser(response.data.user, rememberMe);
setAccessToSalimax(response.data.accessToSalimax); setAccessToSalimax(response.data.accessToSalimax);
setAccessToSalidomo(response.data.accessToSalidomo); setAccessToSalidomo(response.data.accessToSalidomo);
setAccessToSodiohome(response.data.accessToSodioHome); setAccessToSodiohome(response.data.accessToSodioHome);
setAccessToSodistore(response.data.accessToSodistoreMax); setAccessToSodistore(response.data.accessToSodistoreMax);
setAccessToSodistoreGrid(response.data.accessToSodistoreGrid); setAccessToSodistoreGrid(response.data.accessToSodistoreGrid);
if (rememberMe) {
cookies.set('rememberedUsername', username, { path: '/' });
cookies.set('rememberedPassword', password, { path: '/' });
}
if (response.data.accessToSalimax) { if (response.data.accessToSalimax) {
navigate(routes.installations); navigate(routes.installations);
} else if (response.data.accessToSalidomo) { } else if (response.data.accessToSalidomo) {

View File

@ -132,7 +132,7 @@ const InstallationsContextProvider = ({
socket.current.close(); socket.current.close();
socket.current = null; socket.current = null;
} }
const tokenString = localStorage.getItem('token'); const tokenString = localStorage.getItem('token') || sessionStorage.getItem('token');
const token = tokenString !== null ? tokenString : ''; const token = tokenString !== null ? tokenString : '';
const urlWithToken = `wss://monitor.inesco.energy/api/CreateWebSocket?authToken=${token}`; const urlWithToken = `wss://monitor.inesco.energy/api/CreateWebSocket?authToken=${token}`;

View File

@ -3,7 +3,7 @@ import {createContext, ReactNode, useState} from 'react';
// Define the shape of the context // Define the shape of the context
interface TokenContextType { interface TokenContextType {
token?: string | null; token?: string | null;
setNewToken: (new_token: string) => void; setNewToken: (new_token: string, rememberMe?: boolean) => void;
removeToken: () => void; removeToken: () => void;
} }
@ -12,20 +12,29 @@ export const TokenContext = createContext<TokenContextType | undefined>(
undefined undefined
); );
const getStoredToken = (): string | null => {
// Check localStorage first (rememberMe was checked), then sessionStorage
return localStorage.getItem('token') || sessionStorage.getItem('token');
};
// Create a UserContextProvider component // Create a UserContextProvider component
export const TokenContextProvider = ({ children }: { children: ReactNode }) => { export const TokenContextProvider = ({ children }: { children: ReactNode }) => {
const searchParams = new URLSearchParams(location.search); const [token, setToken] = useState(getStoredToken);
const tokenId = parseInt(searchParams.get('authToken'));
//Initialize context state with a "null" user
const [token, setToken] = useState(localStorage.getItem('token'));
const saveToken = (new_token: string) => { const saveToken = (new_token: string, rememberMe = false) => {
setToken(new_token); setToken(new_token);
if (rememberMe) {
localStorage.setItem('token', new_token); localStorage.setItem('token', new_token);
sessionStorage.removeItem('token');
} else {
sessionStorage.setItem('token', new_token);
localStorage.removeItem('token');
}
}; };
const deleteToken = () => { const deleteToken = () => {
localStorage.removeItem('token'); localStorage.removeItem('token');
sessionStorage.removeItem('token');
setToken(null); setToken(null);
}; };

View File

@ -4,7 +4,7 @@ import {InnovEnergyUser} from '../interfaces/UserTypes';
// Define the shape of the context // Define the shape of the context
interface UserContextType { interface UserContextType {
currentUser?: InnovEnergyUser; currentUser?: InnovEnergyUser;
setUser: (user: InnovEnergyUser) => void; setUser: (user: InnovEnergyUser, rememberMe?: boolean) => void;
removeUser: () => void; removeUser: () => void;
} }
@ -13,20 +13,26 @@ export const UserContext = createContext<UserContextType | undefined>(
undefined undefined
); );
const getStoredUser = (): InnovEnergyUser | null => {
const data = localStorage.getItem('currentUser') || sessionStorage.getItem('currentUser');
return data ? JSON.parse(data) : null;
};
// Create a UserContextProvider component // Create a UserContextProvider component
export const UserContextProvider = ({ children }: { children: ReactNode }) => { export const UserContextProvider = ({ children }: { children: ReactNode }) => {
//Initialize context state with a "null" user const [currentUser, setUser] = useState<InnovEnergyUser>(getStoredUser);
const [currentUser, setUser] = useState<InnovEnergyUser>(
JSON.parse(localStorage.getItem('currentUser'))
);
const saveUser = (new_user: InnovEnergyUser) => { const saveUser = (new_user: InnovEnergyUser, rememberMe?: boolean) => {
setUser(new_user); setUser(new_user);
localStorage.setItem('currentUser', JSON.stringify(new_user)); const storage = rememberMe !== undefined
? (rememberMe ? localStorage : sessionStorage)
: (localStorage.getItem('currentUser') ? localStorage : sessionStorage);
storage.setItem('currentUser', JSON.stringify(new_user));
}; };
const deleteUser = () => { const deleteUser = () => {
localStorage.removeItem('currentUser'); localStorage.removeItem('currentUser');
sessionStorage.removeItem('currentUser');
}; };
return ( return (