Google OAuth2 无法使用 React Redux

Question

有人可以帮我弄清楚为什么我的谷歌OAuth不能与我的应用程序一起使用吗？我正在使用过去构建的不同应用程序运行完全相同的代码，它似乎在该应用程序上顺利登录和注销，但与我当前正在使用的应用程序不同。我什至看不到登录按钮，除非我完全删除mapStateToProps功能。在这种情况下，按钮会出现，但显然没有按预期工作。有什么想法吗？我正在使用 Redux 和操作创建器和化简器来反映用户是否已登录。

GoogleOath.js
import React from 'react';
import { connect } from 'react-redux';
import { signIn, signOut } from '../actions';
class GoogleAuth extends React.Component {
componentDidMount() {
window.gapi.load('client:auth2', () => {
window.gapi.client.init({
clientId: '//// hidden ',
scope: 'email'
}).then(() => {
this.auth = window.gapi.auth2.getAuthInstance();
this.onAuthChange(this.auth.isSignedIn.get());
this.auth.isSignedIn.listen(this.onAuthChange);
});
});
}
onAuthChange = isSignedIn => {
if (isSignedIn) {
this.props.signIn(this.auth.currentUser.get().getId());
} else {
this.props.signOut();
}
};
onSignIn = () => {
this.auth.signIn();
};
onSignOut = () => {
this.auth.signOut();
};
renderAuthButton() {
if (this.props.isSignedIn === null) {
return null;
} else if (this.props.isSignedIn) {
return (
<button onClick={this.onSignOut} className='waves-effect waves-light social-icon btn google'>
<i className="fab fa-google"></i> Sign out</button>
);
} else {
return (
<button onClick={this.onSignIn} className='waves-effect waves-light social-icon btn google'>
<i className="fab fa-google"></i> Sign in</button>
);
}
}
render() {
return <div>{this.renderAuthButton()}</div>
}
};
const mapStateToProps = state => {
return { isSignedIn: state.auth.isSignedIn };
};
export default connect(
mapStateToProps,
{ signIn, signOut }
)(GoogleAuth);

Actions Index.js
import { SIGN_IN, SIGN_OUT } from './types';
export const signIn = (userId) => {
return {
type: SIGN_IN,
payload: userId
};
};
export const signOut = () => {
return {
type: SIGN_OUT
}
};

Reducers Index.js
import { combineReducers } from 'redux';
import authReducer from './authReducer';
export default combineReducers({
auth: authReducer
});

Reducers authReducer.js
import { SIGN_IN, SIGN_OUT } from '../actions/types';
const INITIAL_STATE = {
isSignedIn: null,
userId: null
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case SIGN_IN:
return { ...state, isSignedIn: true, userId: action.payload };
case SIGN_OUT:
return { ...state, IsSignedIn: false, userId: null };
default:
return state;
}
};

Answer 1

如果init方法失败，那么您将始终只有一个空白屏幕。state.auth.isSignedIn的初始值是null，在这种情况下，您的渲染显示返回null。 所以你需要isSignedIn才能成为boolean.

向后工作，isSignedIn将从onAuthChange中调度的操作设置，该操作在this.auth.isSignedIn上作为侦听器调用。 该侦听器和this.auth都在.then()回调中设置。 仅当window.gapi.client.init()成功时才会调用该回调。

您可以添加.catch(console.error)回调以查看您的问题所在。 失败案例可以在您的 UI 中更好地处理，但最终您希望获得一个有效的身份验证实例！