React 登录鉴权（路由守卫）（纯代码—可直接拉取使用）

核心：登录api成功的回调里面设置token，路由设置token查询

创建token.js

const getToken = () => {
	return localStorage.getItem('token');
};

const setToken = (token) => {
	return localStorage.setItem('token', token);
};

const removeToken = () => {
	return localStorage.removeItem('token');
};

export {
	getToken,
	setToken,
	removeToken,
};

创建authRouter.js

// 路由鉴权
// 1. 判断token是否存在
// 2. 如果存在 直接正常渲染
// 3. 如果不存在 重定向到登录路由

import { Navigate } from 'react-router-dom';
import { getToken } from '../utils/token';

function AuthRoute({ children }) {
	const tokenStr = getToken();
	if (tokenStr) {
		return <>{children}</>;
	} else {
		return <Navigate to="/loginRegister" replace />;
	}
}

export { AuthRoute };

路由文件使用authRouter.js

import React from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { AuthRoute } from './authRouter';
import Home from '../pages/home/index';
import Data from '../pages/data/index';

const router = createBrowserRouter([
	{
		path: '/',
		element: <Home/>,
	},
	{
		path: '/data',
		element: (
            <AuthRoute>
                <Data/>
            <AuthRoute>
        ),
	},
	{
		path: '*',
		element: 404,
	},
]);

export default function Router() {
	return <RouterProvider router={router} />;
}

登录api设置token

LoginApi(params)
    .then((response) => {
		setToken(response.data.token);
	})
	.catch((error) => {});

注意：上述完成之后，有个问题点需要注意：打开控制台随意编写一个token也能进入页面。可根据自己的项目自行思考如何做这方面的限制。（可以设置一个同值的隐藏key做判断）