如何在React + Graphql中设置resetToken?

时间:2019-11-23 18:31:35

标签: reactjs react-router graphql

我遇到了一个问题:我的后端在我可以更改密码的链接(http://localhost:3000/reset-password/c10868f7-b64a-4396-925a-3f61468c34ba)之后为TriggerResetPassword函数中的链接生成resetToken。但是我无法在我的React前端APP.js中设置resetToken。如何使其运作?

export const RESET_TOKEN = 'reset-token';
import {GC_USER_ID, RESET_TOKEN} from '../constants'
const resetToken = localStorage.getItem(RESET_TOKEN);
<Route exact path={"/reset-password/:resetToken"} component={ResetPassword}/>
<Route exact path={"/forgot-password"} component={ForgotPassword}/>

我的页面是:ResetPassword

const RESET_PASSWORD = gql 'mutation ($email:String!, $resetToken:String!, $password:String!) { passwordReset(email:$email , password: $password, resetToken: $resetToken){email,name, resetToken}}';
const { email, password, resetToken} = this.state;
        return(
                <FormControl >
                    < label htmlFor="password">Password </label>
                    <TextField type="text"  value={this.state.password} onChange={e => {this.setState({ password: e.target.value })
                        }}
                    /><br/>
                    <Mutation mutation={RESET_PASSWORD}  variables={{ email, password, resetToken } } onCompleted={() => this._confirm()}>
                        {mutation => (
                            <Button onClick={mutation}>Submit
                            </Button>)}
                    </Mutation>
                </FormControl>
        )

    }
    _confirm = async (resetToken) => {
        localStorage.getItem(resetToken);
        console.log(resetToken);
            this._saveUserData(resetToken);
        };
    _saveUserData = (id,resetToken) => {
        localStorage.setItem(RESET_TOKEN,resetToken);
        console.log(resetToken)   }
}

和ForgotPassword:

const FORGOT_PASSWORD = gql 'mutation ($email:String!) { triggerPasswordReset(email:$email){ok, resetToken}';
        const { email,resetToken} = this.state;
        return(
                <FormControl >
                     < label htmlFor="password">Email </label>
                    <TextField type="text"  value={this.state.email} onChange={e => {this.setState({ email: e.target.value })
                    }}
                    /><br/>
                    <Mutation mutation={FORGOT_PASSWORD}  variables={{ email } } onCompleted={() => this._confirm()}>
                        {mutation => (
                            <Button onClick={mutation}>Submit
                            </Button>)}
                    </Mutation>
                </FormControl>   )

    }
    _confirm = async data => {
        const { resetToken } = this.state.forgotpassword;
        this._saveUserData(resetToken);
    };
    _saveUserData = (resetToken) => {
        localStorage.setItem(RESET_TOKEN, resetToken);
    }
} 

0 个答案:

没有答案