基於Cookie的登入認證

更多幹貨

對於初學者來說如何實現react的登入，其實是一件非常好腦的事情。如果知道了怎麼實現的話卻非常簡單。

如果以下對你有幫助，記得點贊哦。

一、載入元件時候判斷使用者是否已經登入

class Home extends Component{
    componentWillMount(){
        if (!user.isLogin()) {
            this.props.history.push('/login', null);
        }
    }

    render(){
        if (user.isLogin()) {
            return (
                <Row style={{textAlign: 'center'}}>
                    <Col span={5}> 首頁 </Col>
                    <Col span={14}>
                    </Col>
                </Row>
            );
        } else {
            return <div>需要登入</div>;
        }
    }
}
 

• user.isLogin() 查詢cookie中的使用者資訊是否存在
• this.props.history.push('/login', null); 使用者未登入跳轉到登入頁面

二、userApi

• 包含讀取cookie
• 呼叫API請求伺服器

const loginUser = () => {
    return cookie.load('current-user');
};

const isLogin = () => {
    const user = loginUser();
    return typeof (user) === 'object';
};

const logout = (history, pathname) => {
    UnitConfig.logout(appSn, () => {
        history ?
            history.push('/login?returnPath=' + pathname, {nextPathname: pathname}) :
            window.location.href = '/login?returnPath=' + pathname;
    });
};

const goToLogin = (history, pathname) => {
    UnitConfig.logout(appSn, () => {
        history.push('/login?returnPath=' + pathname, {nextPathname: pathname});
    });
};

export {loginUser, isLogin, logout, goToLogin};
 

三、使用者登入頁面

login.js 中的提交登入資訊

    handleSubmit = (e) => {
        e.preventDefault();
        this.setState({showMessage: 'none', message: '', messageType: ''});
        const { location, history } = this.props;
        let nextPathname = '';
        let returnPath = Params.getQueryString('returnPath');
        if (location.state && location.state.nextPathname) {
            nextPathname = location.state.nextPathname;
        } else if (returnPath) {
            nextPathname += returnPath;
        }
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.setState({loading: true});
                UnitConfig.login(
                    {username: values.userName, password: values.password, remember: values.remember, appSn: appSn},
                    history, nextPathname, values.remember, (loginMessage) => {
                        if(loginMessage && loginMessage.err){
                            this.setState({showMessage: 'block', message: loginMessage.err, messageType: 'error', loading: false});
                        }
                    }
                );
            }
        });
    };
 

UnitConfig 統一配置呼叫API

呼叫API的關鍵程式碼

const baseQuestByPost = (basepath, data, callback) => {
    request.post(httpServer + basepath)
        .set('Content-Type', 'application/json')
        .send(data)
        .set('Accept', 'application/json')
        .end((err, res) => {
            callback && callback(err, res);
        });
};

const login = (data, history, nextPathname, remember, callback) => {
    baseQuestByPost('/user/login.do', data, (err, res) => {

        let loginMessage;

        if (err && err.status === '404') {
            loginMessage = {err: '發生404錯誤：' + res.body.message};
            callback && callback(loginMessage);
        } else if (res) {
            if (res.ok) {
                const result = JSON.parse(res.text);
                if (result.success) {
                    const data = result.data;
                    cookie.save('current-user', data);
                    const loginMessage = {name: 'login', value: result, remember: remember};
                    callback && callback(loginMessage);
                    history.push(nextPathname, null);
                } else {
                    const errMessage = result.errMessage;
                    loginMessage = {err: errMessage};
                    callback && callback(loginMessage);
                }
            } else {
                loginMessage = {err: '請求統一使用者伺服器失敗！'};
                callback && callback(loginMessage);
            }
        } else {
            loginMessage = {err: '請求統一使用者伺服器失敗！'};
            callback && callback(loginMessage);
        }
    });
}

const logout = (appSn, callback) => {
    const user = cookie.load('current-user');
    cookie.remove('current-user');
    baseQuestByPost('/user/logout.do', user ? {...user, appSn} : {appSn});
    callback && callback();
}