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 [email protected]/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

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P29:后台管理系统开发08-实现后台登录功能

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们