Überprüfen der Authentifizierung in React

Question

Wie überprüfe ich, ob der Benutzer in meiner React-Komponente authentifiziert ist?

class MyComponent extends Component { 

    var isAuthenticated = false; // How do I check if the user is authenticated? 
    var message = "Hello stranger!"; 

    if(isAuthenticated) { 
     message = "Hello friend!"; 
    } 

    render() { 
     return(
     <div> 
      {message} 
     </div> 
    ); 
    } 
} 

Answer 1

Sie eine Möglichkeit haben, müssen Sie Ihre Auth an das Frontend an die Oberfläche. Nehmen wir an, Sie haben eine API mit dem Namen user/validate, deren Zweck es ist, ein authentifiziertes Flag und alles, was Sie sonst noch wollen, wie den Server-Authentifizierungs-Token oder so etwas zurückzugeben. Sie benötigen eine Methode, um diese Informationen anzufordern. Ich nehme an, Sie haben eine Möglichkeit, Anfragen an API-Methoden bereits eingerichtet zu machen.

machen Sie eine Funktion, um diese Authentifizierung anzufordern.

export const checkAuth =() => { 
    const url = `${api_route}/user/validate`; 
    // this is just pseudo code to give you an idea of how to do it 
    someRequestMethod(url, (resp) => { 
     if (resp.status === 200 && resp.data.isAuthenticated === true) { 
      setCookie(STORAGE_KEY, resp.data.token); 
     } 
    }); 
} 

Ihre Basis App Komponente würde in etwa so aussehen

export default class App extends Component { 
    constructor() { 
     super(); 
     checkAuth(); 
    } 
    .... 
} 

jetzt Ihre Komponente so etwas tun könnte.

class MyComponent extends Component { 
    constructor(){ 
     super() 
     this.isAuthenticated = getCookie(STORAGE_KEY); 
    } 

    render() { 
     return(
     <div> 
      Hello {this.isAuthenticated ? 'friend' : 'stranger'} ! 
     </div> 
    ); 
    } 
} 

Ihre getCookie und setCookie Methoden so etwas wie dieses

export const setCookie = (name, value, days, path = '/') => { 
    let expires = ''; 
    if (days) { 
     let date = new Date(); 
     date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); 
     expires = `; expires=${date.toUTCString()};`; 
    } 
    document.cookie = `${name}=${value}${expires}; path=${path}`; 
}; 

export const getCookie = (cookieName) => { 
    if (document.cookie.length > 0) { 
     let cookieStart = document.cookie.indexOf(cookieName + '='); 
     if (cookieStart !== -1) { 
      cookieStart = cookieStart + cookieName.length + 1; 
      let cookieEnd = document.cookie.indexOf(';', cookieStart); 
      if (cookieEnd === -1) { 
       cookieEnd = document.cookie.length; 
      } 
      return window.unescape(document.cookie.substring(cookieStart, cookieEnd)); 
     } 
    } 
    return ''; 
}; 

---

Jetzt wäre ... Ich würde empfehlen Ihnen dringend, bei Zugabe von etwas aussehen wie Redux um über Requisiten Übergabe von Daten zu handhaben. Auf diese Weise können Sie eine Speichermethode verwenden, die den getCookie ausführt und sofort aufruft, und alles andere wird als Flag in den Requisiten isAuthenticated haben.

Answer 2

die korrekte Syntax ist:

class MyComponent extends Component { 

    constructor(props){ 
     super(props) 
     this.state = {isAuthenticated: false}; 
    } 

    render() { 
     return(
     <div> 
      Hello {this.state.isAuthenticated ? 'friend' : 'stranger'} ! 
     </div> 
    ); 
    } 
}