P29：后台管理系统开发08-实现后台登录功能

在上篇文章我们已经把后台的登录接口和数据库制作好了，本文就带大家主要实现前台和后台的对接。当然这也不是登录的全部，登录全部我们还要作登录守卫，这个我们可以放在下篇文章详细来学习。

设置路由

当中台接口制作完成后，需要先进行路由的设置，打开/service/app/router文件夹下的admin.js文件。

router.post('/admin/checkLogin', controller.admin.main.checkLogin);

中台路由配置好以后，还要去后台进行配置，打开/admin/config/apiUrl.js文件。加入下面的代码。

let ipUrl = 'http://127.0.0.1:7001/admin/' 

let servicePath = {
    checkLogin: ipUrl + 'checkLogin',  // 检查用户名密码是否正确
}

export default servicePath;

这样路由模块就设置完成了，也就是说前台可以访问到这个中台接口了。

后台登录方法编写 checkLogin

当我们点击登录按钮后，就要去后台请求接口，验证输入的用户名和密码是否正确，如果正确跳到博客管理界面，如果不正确在登录页面进行提示。

代码如下：

const checkLogin = ()=>{
    setIsLoading(true)
    if(!userName){
        message.error("用户名不能为空！");
        setTimeout(()=>{
            setIsLoading(false);
        },500)
        return false;
    }else if(!password){
        message.error("密码不能为空！");
        setTimeout(()=>{
            setIsLoading(false);
        },500)
        return false;
    }

    let dataProps = {
        'userName': userName,
        'password': password
    }

    axios({
        method: 'post',
        url: servicePath.checkLogin,
        data: dataProps,
        withCredentials: true
    }).then(
        res => {
            setIsLoading(false);
            if (res.data.data == '登录成功') {
                localStorage.setItem('openId',res.data.openId);
                props.history.push('/index');
            } else {
                message.error('用户名密码错误！');
                props.history.push('/index');
            }
        }
    )
}

增加相应事件

有了登录方法后，后台就可以通过按钮调用这个方法，代码如下：

<Button type="primary" size="large" block onClick={checkLogin} > Login in </Button>

如果出现跨域问题，可以到/service/config/config.default.js里进行设置配置。

config.security = {
  csrf: {
    enable: false,
  },
  domainWhiteList: [ '*' ],
};
config.cors = {
  origin: 'http://localhost:3000',
  credentials: true, // 允许 Cook 可以跨域
  allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS',
};

这个配置后，就应该可以解决了。

为了方便你的学习,我这里给出整个 Login.js 页面的代码，方便你出错时自行查找。

import React , {useState,useEffect,createContext} from 'react';
import 'antd/dist/antd.css';
import {Card, Input, Button, Spin, message} from 'antd';
import {UserOutlined, KeyOutlined} from '@ant-design/icons';
import '../static/css/Login.css';
import axios from 'axios';
import servicePath from '../config/apiUrl';

const openIdContext = createContext()

function Login(props) {

    const [userName,setUserName] = useState('');
    const [password,setPassword] = useState('');
    const [isLoading,setIsLoading] = useState(false);

    useEffect(()=>{

    },[]);

    const checkLogin = ()=>{
        setIsLoading(true)
        if(!userName){
            message.error("用户名不能为空！");
            setTimeout(()=>{
                setIsLoading(false);
            },500)
            return false;
        }else if(!password){
            message.error("密码不能为空！");
            setTimeout(()=>{
                setIsLoading(false);
            },500)
            return false;
        }

        let dataProps = {
            'userName': userName,
            'password': password
        }

        axios({
            method: 'post',
            url: servicePath.checkLogin,
            data: dataProps,
            withCredentials: true
        }).then(
            res => {
                setIsLoading(false);
                if (res.data.data == '登录成功') {
                    localStorage.setItem('openId',res.data.openId);
                    props.history.push('/index');
                } else {
                    message.error('用户名密码错误！');
                }
            }
        )
    }

    return (
        <div className="login-div">
            <Spin tip="Loading..." spinning={isLoading}>
                <Card title="MYBJ Blog System" bordered={true} style={{ width: 400 }} >
                    <Input
                        id="userName"
                        size="large"
                        placeholder="Enter your userName"
                        prefix={<UserOutlined style={{color:'rgba(0,0,0,.25)'}} />}
                        onChange={(e)=>{setUserName(e.target.value)}}
                    /> 
                    <br/><br/>
                    <Input.Password
                        id="password"
                        size="large"
                        placeholder="Enter your password"
                        prefix={<KeyOutlined style={{color:'rgba(0,0,0,.25)'}} />}
                        onChange={(e)=>{setPassword(e.target.value)}}
                    />     
                    <br/><br/>
                    <Button type="primary" size="large" block onClick={checkLogin}> Login in </Button>
                </Card>
            </Spin>
        </div>
    )
}

export default Login

然后，就可以到浏览器中预览一下结果，如果一切正常，接下来我们就可以制作中台的路由守卫了。