在React中检查验证

如何检查用户是否在我的React组件中进行了验证？在React中检查验证

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> 
    ); 
    } 
}

来源

2016-11-16 Sam

它没有反应的问题。 React是一个UI库。例如，您可以在验证后，在服务HTML文件时，从服务器端设置一个cookie。 –

是的，我已经这样做了。当用户通过身份验证时，我创建了一个cookie，但在我的React组件中，我需要检查用户是否已通过身份验证。我也可以将用户身份验证信息放入我的redux存储中，但不确定如果用户是否通过身份验证，如何阅读。 – Sam

然后将该信息作为道具传递给您的组件。如果您可以在redux商店中设置这些信息，它应该与您的redux商店中的其他商品不同。还是我没有正确理解你？ –

你需要有一种方式来呈现您的身份验证的前端。可以说你有一个叫做user/validate的API，这个API的目的是返回一个认证标志，以及其他任何你想要的服务器授权令牌或者其他东西。你需要一种方法来请求这些信息。我假设你有办法向已经设置好的API方法发出请求。

发出请求此认证的功能。

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); 
     } 
    }); 
}

您的基本应用程序组件将是这个样子

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

现在你的组件可以做这样的事情。

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

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

您的getCookie和setCookie方法的方法将是这样的

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 ''; 
};

现在......我强烈建议你看看添加类似Redux的处理通过道具各地传递数据。这样你就可以拥有一个存储方法来执行getCookie并立即设置它，并且其他所有东西都将被认证为道具上的标志

来源

2016-11-16 08:46:26

-1

正确的语法是：

class MyComponent extends Component { 

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

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

来源

2016-11-16 07:52:45

感谢您的语法修正，但这并没有回答我的问题。如果我正确地阅读你的代码，你正在寻找状态中的认证信息。我的问题是“之前”我把身份验证信息，我怎么实际检查用户是否通过身份验证？ – Sam

对不起，为了验证你可以做一个API（例如使用FeathersJS），使用令牌认证过程，在cookie中设置它，并在构造函数中检查是否存在带有令牌的cookie。然后用这个令牌问你的API。 –

我在我的服务器端代码中处理身份验证 - 在ASP.NET中。我想了解的是如何在我的前端代码中检查身份验证cookie。 – Sam

在React中检查验证

回答

相关问题