代码之家  ›  专栏  ›  技术社区  ›  warm__tape

从Firebase捕获错误响应。用于向用户显示的auth()

  •  0
  • warm__tape  · 技术社区  · 2 年前

    我正在使用React Native/Firebase/Redux构建一个简单的登录系统。我正在努力解决如何捕获由于登录尝试失败而发生的错误。

    这是我的屏幕。js:

    const [alertShowing, setAlertShowing] = useState(false);
    const [alertMessage, setAlertMessage] = useState('');
    ...
    
      function handleLogin() {
        const response = dispatch(login(email, password));
        console.log(response);
      }
    
    
    

    行动。js:

    export const login = (email, password) => {
      return async (dispatch) => {
        try {
          const response = await Firebase.auth().signInWithEmailAndPassword(email, password);
          dispatch(getUser(response.user.uid));
        } catch (e) {
            return e;
        }
      };
    };
    

    我的控制台。上面的日志(响应)正确地向我显示了错误消息,但这显然对用户不是很有用。同时请注意,当使用正确的凭据时,我可以正确登录。

    我在工作中真正想做什么 handleLogin() 检查响应是否为错误,如果是, setlAlertShowing(true) setAlertMessage 我从useDispatch钩子中得到了什么,这样我可以很好地向用户显示它。

    我该怎么做?蒂娅。

    0 回复  |  直到 2 年前
        1
  •  2
  •   Fiston Emmanuel    2 年前

    Firebase错误消息是为开发人员设计的,不是标准的用户友好消息。解决方案是识别身份验证错误代码,并用用户友好的消息进行映射。

    错误代码列表 https://firebase.google.com/docs/auth/admin/errors

    您可以使用这样的函数将authError映射到有意义的错误消息。

    function mapAuthCodeToMessage(authCode) {
      switch (authCode) {
        case "auth/invalid-password":
          return "Password provided is not corrected";
    
        case "auth/invalid-email":
          return "Email provided is invalid";
    
        // Many more authCode mapping here...
    
        default:
          return "";
      }
    }
    
    

    以后再使用

    export const login = (email, password) => {
      return async (dispatch) => {
        try {
          const response = await Firebase.auth().signInWithEmailAndPassword(email, password);
          dispatch(getUser(response.user.uid));
        } catch (e) {
            dispatch({type:"authError",message:mapAuthCodeToMessage(e.code)}));
    
        }
      };
    };