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

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

以上关于P29：后台管理系统开发08-实现后台登录功能的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。