首页 > 解决方案 > 带有 Laravel 的 Vue js - 登录表单安全性

问题描述

我在 Vue js 中有一个简单的应用程序,它可以在两种形式之间进行选择 - 使用短信或密码登录。

下面的应用程序安全吗?

带密码登录的表格:

<template>
 <div v-if="status !== 265" class="loginForm">
    <label for="phone" class="">Phone</label>
    <input type="text" class="form-control" v-model="fields.phone">
    <input type="hidden" id="phone" name="phone" v-model="fields.phone">
    <div v-if="errors && errors.phone" class="text-danger">
       <p v-for="item in errors.phone">{{ item }}</p>
    </div>

      ---> same with password
    <input  type="submit" class="" value="Submit">
 </div>
 <div v-else>
     <!-- redirect to dashboard -->
 </div>
</template>

<script>

export default {
    mixins: [ FormMixin ],

    data() {
        return {
            fields: {},
            errors: {},
            success: false,
            loaded: true,
            status: 0,
            'action': '/klient/customer/login-authorization-password',
        }
    },

    methods: {
        submit() {
            if (this.loaded) {
                this.loaded = false;
                this.success = false;
                this.errors = {};

                axios.post(this.action, this.fields).then(response => {
                    this.fields = {};
                    this.loaded = true;
                    this.success = true;
                    this.status = response.status;;
                }).catch(error => {
                    this.loaded = true;
                    if (error.response.status === 422) {
                        this.errors = error.response.data.errors || {};
                    }
                });
            }
        },

    },
}
</script>

PHP中的控制器:

public function loginAuthorizationPassword(Request $request) {
        $data = request()->validate([
            'phone' => 'required|numeric',
            'password' => 'required|min:6'
        ]);

        $customer = \DB::connection('mysql2')
            ->table('customer')
            ->where('phone_login', $request['phone'])
            ->where('password', NULL)
            ->first();

        if(!$customer) return response()->json(null, 265); //wrong password or customer no exist


        if ($customer->password != NULL && Hash::check($request['password'], $customer->password)) {
            Session::set('loggedIn', TRUE);
            Session::set('id', $customer->id);
            return response()->json(null, 267); //return user is valid
        } else return response()->json(null, 265); //wrong password or customer no exist
    }

响应状态为 267 后,vue 重定向到 /customer/dashboard 和 PHP 检查会话变量 loggedIn。如果 loggedIn 为 true,则用户可以使用他们的 id 访问数据。

标签: phplaravelvue.js

解决方案


推荐阅读