在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

你需要有一种方法将你的身份验证表现到前端.假设你有一个api叫做api user/validate的目的是返回一个经过身份验证的标志以及你想要的任何其他服务器身份验证令牌.您需要一种方法来请求该信息.我假设您有办法向已经设置的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并立即将其设置,其他所有内容都将具有isAuthenticated作为道具中的标志