मुझे यकीन नहीं है कि यह क्यों काम नहीं कर रहा है। जब login फ़ंक्शन को कॉल किया जाता है, तो लाइन user = res.headers['access-token']; को छोड़कर सब कुछ काम करता है। user अपरिभाषित रहता है। मेरी प्रमाणीकरण प्रणाली इस पर आधारित है: https://kentcdodds.com/blog/authentication- इन-रिएक्शन-अनुप्रयोग

import React from 'react';
import axios from 'axios';

const AuthContext = React.createContext();
const url = 'http://localhost:3001/auth/sign_in';

function AuthProvider(props) {
  let user;

  async function login(e, email, password) {
    e.preventDefault();
    try {
      const res = await axios({
        method: 'post',
        url: url,
        data: JSON.stringify({ email, password }),
        headers: { 'Content-Type': 'application/json' }
      });
      localStorage.setItem('token', res.headers['access-token']);
      localStorage.setItem('client', res.headers['client']);
      localStorage.setItem('uid', res.headers['uid']);
      user = res.headers['access-token'];
      console.log('Logged in');
    } catch (err) {
      console.log(err);
    }
  }

  return (
    <AuthContext.Provider
      value={{ user, login, logout, register }}
      {...props}
    />
  );
}

const useAuth = () => React.useContext(AuthContext);

export { AuthProvider, useAuth };
1
dya26 13 सितंबर 2020, 21:32

2 जवाब

सबसे बढ़िया उत्तर

यह पता चला है कि मुझे केवल useState का उपयोग करना था।

function AuthProvider(props) {
  const [user, setUser] = useState();

  async function login(e, email, password) {
    e.preventDefault();
    try {
      const res = await axios({
        method: 'post',
        url: url,
        data: JSON.stringify({ email, password }),
        headers: { 'Content-Type': 'application/json' }
      });
      localStorage.setItem('token', res.headers['access-token']);
      localStorage.setItem('client', res.headers['client']);
      localStorage.setItem('uid', res.headers['uid']);
      setUser(res.headers['access-token']);
      console.log('Logged in');
    } catch (err) {
      console.log(err);
    }
  }

  return (
    <AuthContext.Provider
      value={{ user, login, logout, register }}
      {...props}
    />
  );
}
1
dya26 14 सितंबर 2020, 18:56

ऐसा इसलिए है क्योंकि टोकन प्राप्त करने के लिए, आपको getItem() फ़ंक्शन का उपयोग करने की आवश्यकता है।

तो आपके मामले में, इसके बजाय: user = res.headers['access-token'];

आपको इस तरह से मूल्य पुनर्प्राप्त करने की आवश्यकता होगी: user = localStorage.getItem('token')

कोशिश करें और मुझे बताएं कि क्या यह आपके लिए आवश्यक काम करता है।

0
ale917k 13 सितंबर 2020, 21:40