讨论 技术讨论 用户前端/api/login,/api/login_captcha如何一起使用?

用户前端/api/login,/api/login_captcha如何一起使用?

WX_pX4 发表于    阅读:100    回复:5

问题描述:

我装了cms 做后台,前端试图用uni-app开发。最先测试的是用户登录页面,页面 code 如下。基本思路是页面加载的时候从/api/login_captcha 得到验证码图片,然后用户输入‘用户名’,‘密码’,‘验证码’,通过表单发送到/api/login 进行登录操作。始终得到图片验证码错误。请问应该如何使用这两个接口进行用户登录啊?另外,如果后台关闭图片验证,只进行‘用户名’,‘密码’登录时没有问题的。

template>
    <view>
        <form @submit="formSubmit">
            <view>
                <input focus placeholder="name" v-model="loginData.username" />
            </view>
            <view>
                <input focus placeholder="password" v-model="loginData.password" />
            </view>
            <view>
                <input placeholder="captcha" v-model="loginData.captcha" />
                <image :src="imgCaptcha" mode=""></image>
            </view>
            <view>
                <button type="primary" form-type="submit">登录</button>
            </view>
        </form>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                loginData: {
                    username: '',
                    password: '',
                    captcha: ''
                },
                imgCaptcha: ''

            };
        },
        onLoad() {
            this.getImageCaptcha()
        },
        methods: {
            getImageCaptcha() {
                let imgCode = '';
                uni.request({
                    url: '/api/login_captcha',
                    method: 'POST',
                    success: (res) => {
                        console.log('captcha request success')
                        console.log(res.data); // res.data.code = 0 is success
                        this.imgCaptcha = res.data.data.image
                        console.log('image captcha')
                        console.log(this.imgCaptcha)
                    }
                });

            },
            formSubmit(e) {
                uni.request({
                    url: '/api/login',
                    method: 'POST',
                    data: this.loginData,
                    success: (res) => {
                        console.log('request success')
                        console.log(res.data); // res.data.code = 0 is success
                        if (res.data.code == 0) { // 非0就是错误
                            // save `api-token` locally
                            uni.setStorageSync('api-token', res.header['api-token']);
                        } else {
                            uni.showToast({
                                title: res.data.msg,
                                icon: 'error',
                                duration: 2000
                            });
                        }

                    },
                    fail: (res) => {
                        console.log('failed')
                        console.log(res)
                        uni.showToast({
                            title: 'Failed to login',
                            icon: 'error',
                            duration: 2000
                        });
                    }
                });
            }

        }
    }
</script>

<style>
    .captcha-box {
        height: 100rpx;
        padding: 10rpx 0;

        display: flex;

        input {
            border: 1px solid #ccc;
        }

        image {
            margin: 10rpx;
            width: 80%;
            height: 80rpx;
            border: 1px solid red;
        }

    }
</style>

环境信息:

PHP8.1、ModStartCMS  V8.0.0,MSCore  V3.8.0  ( With LARAVEL9 )                

复现步骤:

1

2

3

建议与意见:

1

2

3

评论

需要在前端全局处理api-token,Api所有请求,需要携带 api-token 请求头。

  • 第一次发起请求该值留空即可,返回的响应头中会在服务端生成 api-token 。

  • 在所有接口交互过程中,当响应头中存在 api-token 时,需要覆盖客户端的 api-token 值。

  • 通常第一个请求接口无需携带 api-token 信息,如配置接口 /api/config 、登录接口 /api/login


 

谢了。

 

用户登录成功后只返回数据如下:

{"code":0,"msg":"ok"}

不包含任何用户"data" 吗?比如基本的id, username.... 我看了通用用户的接口文档,也没有看到接口返回基本用户数据的。 如果需要自己写一个新的接口,除了直接该Member 模块代码外,是不是只能开发一个新的模块?感觉就为了一个接口就新增加一个模块也不是什么好方法。。

 

可以参考一些现成的手机应用。

/api/config 这个是网站的基本信息

/api/config_app 这个是用户、应用配置等的基本信息

用户登录成功后,可以直接刷新 /api/config_app 这个接口

 

ok. will try.

 
1
我来评论
QQ
微信