React学习笔记_基于Cookie的登录认证

基于Cookie的登录认证

更多干货

  • 分布式实战(干货)

  • spring cloud 实战(干货)

  • mybatis 实战(干货)

  • spring boot 实战(干货)

  • React 入门实战(干货)

  • 构建中小型互联网企业架构(干货)

  • python 学习持续更新

  • ElasticSearch 笔记

  • kafka storm 实战 (干货)

  • scala 学习持续更新

  • RPC

  • 深度学习

  • GO 语言 持续更新

 

 

 

对于初学者来说如何实现react的登录,其实是一件非常好脑的事情。如果知道了怎么实现的话却非常简单。

如果以下对你有帮助,记得点赞哦。

一、加载组件时候判断用户是否已经登录

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

    render(){
        if (user.isLogin()) {
            return (
                
                     首页 
                    
                    
                
            );
        } else {
            return 
需要登录
; } } }
  • 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();
}

你可能感兴趣的:(【前端,react】)