如何在 ReactJS 上使用 JWT 令牌注销

Question

I am using an API in nodeJS and APP in ReactJS. On nodeJS I'm doing the JWT token validation. In reactJS I use to check if it's valid, otherwise I ask to authenticate again. Now I save JWT token in localStorage, if you have something safer let me know.

My problems:

1. Send a request to the API and wait for the response is too slow (2 seconds).
2. When the time of the token and page change expired, it goes to login and when logging in, it locks on the same page (login), only reloading the page to work.
3. When the token is invalid and I change the page, the page is completely blank.

Problem 1: Could I validate the token in the APP instead of requesting it all the time to the API, would this be the most correct solution? Problem 2 and 3: I believe it's the problem in logic where validation takes place after page rendering.

My APP Code:

App.tsx

import AdminPrivateRoute from './AdminPrivateRoute';
import { AuthContextProvider } from './contexts/AuthContext';

export default function App() {
    return (
        <BrowserRouter>
            <AuthContextProvider>
                <Switch>
                    <Route path="/" exact component={Home} />
                    <AdminPrivateRoute path="/admin" component={Admin} />
                    <Route path="*" component={() => <h1>Page not found 404</h1>} />
                </Switch>
            </AuthContextProvider>
        </BrowserRouter>
    );
}

AdminPrivateRoute.tsx

import { getToken, logout } from './Auth';
import Api from './Api';

const AdminPrivateRoute = ({component: Component, ...rest}) => {
    useEffect(() => {
        // Here I make a fetch call to validate the token in the API
        Api.checkToken(getToken() || '').then(res => {
            if (!res.auth) {
                logout();
            }
        });
    })

    return (
        <Route
            {...rest}
            render={props =>
                isAuthenticated() ? (
                    <Component {...props} />
                ) : (
                    <SignIn />
                )
            }
        />
    );
};

Auth.ts

export const TOKEN_KEY = 'XYZ';
export const getToken = () => localStorage.getItem(TOKEN_KEY);
export const isAuthenticated = () => getToken() !== null; // I thought about validating the token right here in the app
export const setToken = (token: string) => {
    localStorage.setItem(TOKEN_KEY, token);
};
export const logout = () => {
    localStorage.removeItem(TOKEN_KEY);
};

AuthContextProvider.tsx (I removed all declare types)

import Api from './Api';
import { setToken } from './Auth';

export function AuthContextProvider(props) {
    const [user, setUser] = useState();

    async function signIn({email, password}) {
        // TODO: Validations here

        const res = await Api.adminSignIn({email, password});

        if (!res.auth) {
            throw new Error(res.message);
        }

        if (res.token) {
            setToken(res.token);
        }

        const {name} = res.user;

        setUser({
            name,
        });
    }

    return (
        <AuthContext.Provider value={{user, signIn}}>
            {props.children}
        </AuthContext.Provider>
    );
}

Thanks in advance.

Answer 1

so here is the solution of your problems

Problem-1

Send a request to the API and wait for the response is too slow (2 seconds).

Solution

make a state in your component by name loading which is by default false just before api call change it to true . on login/signIn button show spinner if loading state is true. When you recieve the response of API make loading to false and if token is authenticated and valid save it in cookies [because cookies are safer then localstorage]

Problem-2

When the time of the token and page change expired, it goes to login and when logging in, it locks on the same page (login), only reloading the page to work.

Solution

This is because when your store in localStorage, as i think on reloading you lose your JWT token for this i recommand you to use Reducer and also its persist form.

Problem-3

When the token is invalid and I change the page, the page is completely blank.

Solution

When token is Invalid redirect user to login page

Note:

send your JWT token in each api call to also authenticate your api's