0

我正在尝试使用 redux-oidc 捕获令牌，但我在 redux 上有错误

这是我的错误

在此处输入图像描述

在此处输入图像描述

这是我的商店

import {
    createRouterMiddleware,
    initialRouterState,
} from 'connected-next-router';
import { createWrapper } from 'next-redux-wrapper';
import Router from 'next/router';
import { applyMiddleware, createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { loadUser } from 'redux-oidc';
import thunkMiddleware from 'redux-thunk';
import reducerList from './reducerList';
import userManager from './managers/userManager';

const makeStore = (context) => {
    const routerMiddleware = createRouterMiddleware();

    const middlewares = [thunkMiddleware, routerMiddleware];
    const middlewareEnhancer = applyMiddleware(...middlewares);

    const enhancers = [middlewareEnhancer];
    const composedEnhancers = composeWithDevTools(...enhancers);

    const { asPath } = context.ctx || Router.router || {};

    let initialState;
    if (asPath) {
        initialState = {
            router: initialRouterState(asPath),
            oidc: undefined,
            language: "tr",
            cartItems: [],
        };
    }

    const store = createStore(reducerList, initialState, composedEnhancers);

    if (process.env.NODE_ENV !== 'production' && module.hot) {
        module.hot.accept('./reducerList', () =>
            store.replaceReducer(reducerList)
        );
    }

    if (typeof window !== 'undefined') {
        loadUser(store, userManager);
    }

    return store;
};

export const wrapper = createWrapper(makeStore);

这是我的 _app.js

import React, { useEffect, useState, useContext } from 'react';
import NavbarMenu from '../src/components/navbar/Menu';
import Layout from '../src/components/requirements/Layout';
import '../src/styles/globals.css';
import Head from 'next/head';
import { configureStore } from '../src/redux/configureStore';
import { PersistGate } from 'redux-persist/integration/react';
import { wrapper } from '../src/redux/oidcStore';

const { persistor } = configureStore();

function MyApp({ Component, pageProps }) {
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        setTimeout(() => {
            setLoading(false);
        }, 500);
    }, []);

    return (
        <>
            <Head>
                <title>Oidc Example</title>
                <link
                    rel="stylesheet"
                    href="https://fonts.googleapis.com/icon?family=Material+Icons"
                />
                <link
                    rel="stylesheet"
                    href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
                />
                <link
                    rel="stylesheet"
                    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
                    integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
                    crossorigin="anonymous"
                    referrerpolicy="no-referrer"
                />
            </Head>
            {loading ? (
                <h1>Loading to page. Please Wait </h1>
            ) : (
                <>
                    <PersistGate persistor={persistor}>
                        <NavbarMenu />
                        <Layout>
                            <Component {...pageProps} />
                        </Layout>
                    </PersistGate>
                </>
            )}
        </>
    );
}

export default wrapper.withRedux(MyApp);

这是我的 reducerList.js

import { combineReducers } from 'redux';
import languageReducer from './reducers/languageReducer';
import cartReducer from './reducers/cartReducer';
import { reducer as OidcReducer } from 'redux-oidc';



const reducerList = combineReducers({
    language: languageReducer,
    cart: cartReducer,
    oidc: OidcReducer
});

export default reducerList;

这是我的 userManager.js

import { WebStorageStateStore } from 'oidc-client';
import { createUserManager } from 'redux-oidc';

let userManager;

if (typeof window !== 'undefined') {
    const userManagerConfig = {
        client_id: 'OidcExample_App',
        redirect_uri: 'http://localhost:3000/auth/callback',
        response_type: 'token id_token',
        scope: 'openid profile',
        authority: 'https://localhost:44311',
        post_logout_redirect_uri: 'http://localhost:3000/auth/signout',
        filterProtocolClaims: true,
        loadUserInfo: true,
        userStore: new WebStorageStateStore({ store: window.localStorage }),
    };

    userManager = createUserManager(userManagerConfig);
} else {
    userManager = undefined;
}

export default userManager;

这是我的回调.js

import userManager from "../../src/redux/managers/userManager";
import { useRouter } from 'next/router';
import { CallbackComponent } from 'redux-oidc';

export default function Callback() {
    const router = useRouter();

    const successCallback = (user) => {
        const uri = user.state["returnUrl"];
        redirect(uri);
    };

    const errorCallback = (error) => {
        // todo notify login failed
        console.error(error);
        redirect("/error");
    };

    const redirect = (uri) => {
        router.push(uri || "/");
    };

    return (
        <CallbackComponent userManager={userManager} successCallback={successCallback} errorCallback={errorCallback} >
            <h1>yükleniyor </h1>
        </CallbackComponent>
    );
}

这个错误可能是什么？，是 redux-oidc 还是我的 react-redux 代码或我的 callback.js 感谢所有的答案

4

0 回答 0