redux TypeError:无法读取null的属性(阅读'accessToken')

ct3nt3jp  于 2022-11-24  发布在  其他
关注(0)|答案(1)|浏览(174)

我已经跟随Lama YouTube视频创建了电子商务应用程序。我试图在管理页面上实现注销功能,这在教程中没有完成。我在redux中抓取currentUser,然后将其设置为null以便注销。我成功地做到了这一点。但现在由于我注销了,我丢失了accessToken,无法呈现登录页面和主管理面板。
//我的两个请求方法.jsx

import axios from "axios";

const BASE_URL = "http://localhost:5000/api/";
const TOKEN = JSON.parse(JSON.parse(localStorage.getItem("persist:root")).user)
        .currentUser.accessToken;
console.log(TOKEN);

export const publicRequest = axios.create({
    baseURL: BASE_URL 
});

export const userRequest = axios.create({
    baseURL: BASE_URL,
    headers: {token: `Jhoncena ${TOKEN}`}
});

在此处获取当前为空的令牌。
//我的userReducer

import { createSlice} from "@reduxjs/toolkit";

const userSlice = createSlice({
    name: "user",
    initialState: {
        currentUser: null,
        isFetching: false,
        error: false
    },
    reducers:{
        loginStart: (state)=>{
            state.isFetching = true;
        },
        loginSuccess: (state, action)=>{
            state.isFetching = false;
            state.currentUser = action.payload;
            state.error = false;
        },
        loginFailure: (state)=>{
            state.isFetching = false;
            state.error = true;
        },
        logout: (state) =>{
            state.currentUser = null;
        },
    },
});

export const {loginStart, loginSuccess,loginFailure, logout} = userSlice.actions;
export default userSlice.reducer;

//我的api调用

//USER LOGIN
export const login = async (dispatch,user)=>{
    dispatch(loginStart());

    try {
        const res = await publicRequest.post("/auth/login",user)
        dispatch(loginSuccess(res.data));
    } 
    catch (err) 
    {
        dispatch(loginFailure());
        console.log(err);    
    }
}

//USER LOGOUT
export const userlogout = async(dispatch)=>{
    dispatch(logout());
}

和我的topbar,其中注销是用onClick函数启动的

import React from "react";
import { NotificationsNone, Language, Settings} from "@material-ui/icons";
import "./topbar.css";
import { useDispatch } from "react-redux";
import { userlogout } from "../../redux/apiCalls";

export default function Topbar() {
  const dispatch = useDispatch();

  const handleClick = ()=>{
    userlogout(dispatch);
  }

  return (
    <div className="topbar">
      <div className="topbarWrapper">
        <div className="topLeft">
          <span className="logo">Ecoflex-Admin</span>
        </div>
        <div className="topRight">
          <div className="topbarIconContainer">
            <NotificationsNone />
            <span className="topIconBadge">2</span>
          </div>
          <div className="topbarIconContainer">
            <Language />
            <span className="topIconBadge">2</span>
          </div>
          <div className="topbarIconContainer">
            <Settings />
          </div>
          <img src="https://img.icons8.com/fluency/96/000000/admin-settings-male.png" alt="" className="topAvatar" />
          <img className="logout" src="https://img.icons8.com/ios-filled/50/000000/exit.png" alt="" onClick={handleClick}/>
        </div>
      </div>
    </div>
  );
}

下面是我的登录路径的ss当前的样子enter image description here

rqcrx0a6

rqcrx0a61#

代替

const TOKEN = JSON.parse(JSON.parse(localStorage.getItem("persist:root")).user)
        .currentUser.accessToken;

写下:

const TOKEN = () => {
      if (
        JSON.parse(JSON.parse(localStorage.getItem('persist:root')).user)
          .currentUser.accessToken
      ) {
        return JSON.parse(JSON.parse(localStorage.getItem('persist:root')).user)
          .currentUser.accessToken;
      } else { return '' }
    };

相关问题