خطا در صفحه لاگین react redux
سلام. من یک صفحه لاگین دارم و یک صفحه ای که میخواهم بعد از لاگین وارد شوم. در اینجا از ریداکس استفاده کردم و هنگامی که لاگین میشوم بمحض اینکه صفحه را رفرش میکنم مجددا به صفحه لاگین بر میگردد. اگر دوستان کمک بفرمایند ممنون میشود:
reduce.js:
import {
USER_LOADED,
USER_LOADING,
AUTH_ERROR,
LOGIN_FAIL,
LOGIN_SUCCESS,
LOGOUT,
REGISTER_SUCCESS,
REGISTER_FAIL
} from "../actions/types";
const initialState = {
isAuthenticated: null,
token: localStorage.getItem("token"),
isLoading: false,
user:null
};
export default function(state = initialState, action) {
switch (action.type) {
case USER_LOADING:
return {
...state,
isLoading: true
};
case USER_LOADED:
return {
...state,
isLoading: false,
isAuthenticated: true,
user: action.payload
};
case LOGIN_SUCCESS:
localStorage.setItem("token", action.payload.access);
return {
...state,
...action.payload,
isLoading: false,
isAuthenticated: true
};
case LOGOUT:
return {
...state,
isLoading: false,
user: null,
isAuthenticated: false,
token: null
};
default:
return state;
}
}
----------------------------------------------action:
import axios from "axios";
import {
USER_LOADING,
USER_LOADED,
LOGIN_SUCCESS,
LOGOUT
} from "./types";
// axios.defaults.withCredentials = true;
export const loadUser = () => (dispatch, getState) => {
dispatch({ type: USER_LOADING });
const token = getState().auth.token;
const config = {
headers: {
"Content-Type": "application/json"
}
};
if (!!token) {
config.headers["Authorization"] = `JWT ${token}`;
}
axios
.get("http://127.0.0.1:8000/api/user/", config)
.then(res => {
dispatch({
type: USER_LOADED,
payload: res.data
});
})
.catch(err => {console.log('Error')
});
};
export const loginUser = (user_name, password) => (dispatch, getState) => {
const config = {
headers: {
"Content-Type": "application/json",
Accept: "application/json"
}
};
const body = JSON.stringify({ user_name, password });
axios
.post("http://127.0.0.1:8000/api/token/", body, config)
.then(res => {
dispatch({
type: LOGIN_SUCCESS,
payload: res.data
});
})
.catch(err => {console.log('Error')
});
};Store:
import { createStore, applyMiddleware } from "redux";
import reducers from "./reducers";
import thunk from "redux-thunk";
const initialStore = {};
const middlewares = [thunk];
const store = createStore(
reducers,
initialStore,
applyMiddleware(...middlewares));
export default store;
جهت ارسال پاسخ ابتدا عضو سایت شوید.
آخرین دوره‌های آموزشی روکسو
سوالات مرتبط
روکسو در اینستاگرام
به جمع هزاران کاربر اینستاگرامی روکسو بپیوندید.