authentication - 在 React 中检查身份验证

Question

如何检查用户是否在我的 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>
      );
   }
}

Answer 1

您需要有一种方法来向前端显示您的身份验证。假设您有一个名为 user/validate 的 api，该 api 的目的是返回经过身份验证的标志以及您想要的任何其他内容，例如服务器身份验证 token 或其他内容。您需要一种方法来请求该信息。我假设您有办法向已设置的 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 之类的东西来处理通过 props 传递的数据。这样，您就可以使用一种存储方法来执行 getCookie 并立即设置它，而其他所有内容都将 isAuthenticated 作为属性中的标志