من نحن؟

 

✍️ المقدمة:

في أحد المشاريع التي عملت عليها، طُلب مني تطوير نظام يتيح للمستخدمين رفع ملفات خاصة (مثل السيرة الذاتية أو التقارير)، مع مراعاة أمرين أساسيين:

• ✅ الأمان: لا يمكن لأي مستخدم عرض ملفات غيره

• ✅ السرعة والسهولة: واجهة حديثة باستخدام Vue.js

أغلب المقالات التي وجدتها على الإنترنت تناولت موضوع رفع الملفات، لكنها لم تغطِّ النقطة الأهم: الحماية والتحقق من الصلاحيات عند العرض والتحميل.

في هذا المقال سأشاركك كيف بنيت النظام من الصفر باستخدام Laravel وVue، وكيف ضمنت أن الملفات لا يمكن الوصول إليها إلا من صاحبها أو الأدمن.

🧱 الهيكل الأساسي:

• 1. المستخدم يرفع ملفًا عبر واجهة Vue
• 2. الملف يُخزن داخل مجلد محمي في Laravel
• 3. المسار يُخزن في قاعدة البيانات
• 4. يتم التحقق من صلاحية المستخدم قبل العرض أو التحميل

⚙️ خطوات التنفيذ:

✅ 1. إنشاء جدول الملفات في Laravel

php artisan make:model File -m

// migration
Schema::create('files', function (Blueprint $table) {
    $table->id();
    $table->unsignedBigInteger('user_id');
    $table->string('original_name');
    $table->string('stored_name');
    $table->string('mime');
    $table->timestamps();
});

✅ 2. إنشاء API في Laravel لاستقبال الملف

public function upload(Request $request)
{
    $request->validate([
        'file' => 'required|file|max:5120'
    ]);

    $user = auth()->user();
    $file = $request->file('file');
    $name = uniqid() . '.' . $file->getClientOriginalExtension();

    $file->storeAs('private_uploads/' . $user->id, $name);

    $user->files()->create([
        'original_name' => $file->getClientOriginalName(),
        'stored_name' => $name,
        'mime' => $file->getMimeType(),
    ]);

    return response()->json(['message' => 'تم رفع الملف بنجاح']);
}

[🔒 نستخدم مجلد غير مرئي للويب: storage/app/private_uploads]

✅ 3. واجهة Vue لرفع الملف

<template>
  <div>
    <input type="file" @change="uploadFile" />
  </div>
</template>

<script>
export default {
  methods: {
    async uploadFile(event) {
      const form = new FormData();
      form.append("file", event.target.files[0]);

      await axios.post("/api/upload", form, {
        headers: { "Content-Type": "multipart/form-data" },
      });
    }
  }
}
</script>

✅ 4. تأمين عرض الملفات

عند تحميل ملف، استخدمت Route مخصصة تتحقق من المستخدم أولًا:

public function download($id)
{
    $file = File::findOrFail($id);

    if (auth()->id() !== $file->user_id && !auth()->user()->is_admin) {
        abort(403);
    }

    $path = storage_path('app/private_uploads/' . $file->user_id . '/' . $file->stored_name);

    return response()->download($path, $file->original_name, [
        'Content-Type' => $file->mime,
    ]);
} 

[✅ بذلك، لا أحد يستطيع فتح الرابط مباشرة من المتصفح]

📈 النتائج:

• حماية كاملة للملفات المرفوعة

• واجهة سريعة وعصرية باستخدام Vue

• تجربة مستخدم مرنة وسلسة

• تحكم في صلاحيات الوصول بدون تعقيد

✅ نصائح من التجربة:

• لا ترفع الملفات إلى public/ أبدًا إذا كانت تحتوي معلومات خاصة

• تأكد من تحديد حجم الملف ونوعه في التحقق

• اعتمد UUID أو اسم مشفر للملفات لتفادي التكرار أو التخمين

🧾 الخلاصة:

بناء نظام رفع ملفات آمن ليس بالأمر الصعب، لكنه يتطلب فهمًا دقيقًا لكيفية التحكم في المسارات والصلاحيات.

بدمج Laravel وVue، يمكنك تقديم تجربة ممتازة وآمنة للمستخدمين دون تعقيد.
وهذا ما يميز المطور المحترف عن العادي: فهم التفاصيل التي لا تظهر للمستخدم، ولكن تحميه.