Reactjs 虽然通过了身份认证，但并没有导航到请求的页面

我没有看到任何在用户身份验证后重定向用户的内容.如果我对这个问题的理解是正确的，那么您需要更新代码，以便在他们成功通过身份验证后处理到受保护的路由的重定向.

对于这一点，我建议做一些改变.

将身份验证判断更新为有状态，而不是依赖于从本地存储读取.对本地存储的更新不会触发Reaction组件重新呈现，因此AdminGuard中的身份验证判断可能会过时.因为state.authSlice.data状态是令牌值，所以UI应该引用该值，或者具体地说是state.authSlice.data.accessToken.

import React from "react";
import { Navigate, Outlet, useLocation } from "react-router-dom";
import { useSelector } from 'react-redux';
import { selectAuthState } from "../slices/auth.slice";

const AdminGuard = () => {
  // Capture the current location for auth redirect
  const location = useLocation();

  // Access authentication state
  const { accessToken } = useSelector(selectAuthState);

  // Wait until any initial/pending auth checks complete
  if (accessToken === undefined) {
    return null; // or loading indicator/spinner/etc
  }

  // Return Outlet for nested routes if authenticated
  // Return redirect with current location in state
  return accessToken
    ? <Outlet />
    : <Navigate to="/login" redirect state={{ from: location }} />;
};

export default AdminGuard;

身份验证服务

将注销功能更新为也是一个thunk.这是因为当用户注销时，您可以添加减速器 case 来处理重置/清除state.data值.

import { createAsyncThunk } from "@reduxjs/toolkit";
import { axiosApiInstance } from "./axios.services";
import { TokenService } from "./token.service";

export const AuthService = {};

AuthService.user登录 = createAsyncThunk(
  "userSlice/user登录",
  async ({ username, password }, { rejectWithValue }) => {
    try {
      const { data } = await axiosApiInstance.post(
        "https://localhost:7105/api/Connect",
        { username, password },
        {
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            username: typeof username === "string" ? username.toString() : "",
            password: typeof password === "string" ? password.toString() : "",
          }),
        }
      );

      const tokenResponse = { accessToken: data };
      TokenService.setToken(tokenResponse);

      return tokenResponse;
    } catch (error) {
      return rejectWithValue(error);
    }
  }
);

AuthService.userLogout = createAsyncThunk(
  "userSlice/user登录",
  () => {
    TokenService.clearToken();
  }
);

const authSlice = createSlice({
  name: "authSlice",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(AuthService.user登录.pending, (state) => {
        state.isLoading = true;
        state.hasError = false;
      })
      .addCase(AuthService.user登录.fulfilled, (state, action) => {
        state.pending = false;
        state.data = action.payload;
      })
      .addCase(AuthService.user登录.rejected, (state) => {
        state.isLoading = false;
        state.hasError = true;
      })
      .addCase(AuthService.userLogout.pending, (state) => {
        state.isLoading = true;
        state.hasError = false;
      })
      .addCase(AuthService.userLogout.fulfilled, (state) => {
        state.pending = false;
        state.data = {}; // <-- reset on logout
      })
      .addCase(AuthService.userLogout.rejected, (state) => {
        state.isLoading = false;
        state.hasError = true;
      });
  },
});

APP

Update APP to render the AdminGuard as a layout route component.

const router = createBrowserRouter([
  {
    path: "/login",
    element: <登录 />,
  },
  {
    element: <Layout />,
    children: [
      {
        element: <AdminGuard />,
        children: [
          {
            path: "/",
            element: <Resources />,
          },
          {
            path: "/create",
            element: <CreateResource />,
          },
          {
            path: "/edit/:id",
            element: <EditResource />,
          },
        ],
      },
    ],
  },
]);

function APP({ Component }) {
  return (
    <div className="APP">
      <RouterProvider router={router} />
    </div>
  );
}

登录

Update the 登录 component's submit handler to wait for the login action to resolve and then issue an imperative redirect back to the route path the user was originally attempting to access.

import { useLocation, useNavigate } from 'react-router-dom';
import { useDispatch } from "react-redux";
import 登录View from "./view";
import { AuthService } from "../../services/auth.services";

function 登录() {
  const dispatch = useDispatch();
  const { state } = useLocation();
  const navigate = useNavigate();

  onSubmit = async ({ username, password }) => {
    try {
      // Wait for login action to complete, e.g. resolve
      await dispatch(AuthService.user登录({ username, password })).unwrap();

      // Redirect to original target, or safe non-protected route
      const { from } = state || { from: /* safe fallback that isn't a protected route */ };
      navigate(from, { replace: true });
    } catch(error) {
      // handle errors?
    }
  }

  return (
    <>
      <登录View onSubmit={onSubmit} />
    </>
  );
}

export default 登录;

同样，现在的"注销"功能是一样的，调度AuthService.userLogout动作后重定向.

const dispatch = useDispatch();
const navigate = useNavigate();

const logout = async () => {
  try {
    await dispatch(AuthService.userLogout()).unwrap();
    navigate("/login", { replace: true });
  } catch(error) {
    // handle errors?
  }
};