مصادقة JWT: تسجيل الدخول والتحديث
تدفق access token وrefresh token، وملفات تعريف ارتباط httpOnly، والتحديث الصامت باستخدام interceptors
مصادقة JWT: تسجيل الدخول والتحديث درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
نموذج رموز الوصول والتحديث
يستخدم نظام JWT المتين رمزين: رمز وصول قصير الأجل (بالدقائق) يُرسل مع كل طلب API، ورمز تحديث طويل الأجل (بالأيام) يُستخدم فقط لإنشاء رموز وصول جديدة. وهذا يحد من نطاق التعرض للخطر إذا تسرّب رمز الوصول.
تسجيل إضافة JWT
باستخدام Fastify، سجّل @fastify/jwt ووفّر سرًا قويًا. تضيف هذه الإضافة أدوات التوقيع والتحقق إلى التطبيق وكائنات الطلب.
import jwt from '@fastify/jwt'
await app.register(jwt, {
secret: process.env.JWT_SECRET
})مسار تسجيل الدخول
يتحقق POST /auth/login من بيانات الاعتماد، ثم يصدر الرمزين معًا. لا تخزّن كلمات المرور بصيغة نصية صريحة مطلقًا، بل قارنها بقيمة تجزئة (bcrypt/argon2).
app.post('/auth/login', async (req, reply) => {
const { email, password } = req.body
const user = await findUser(email)
if (!user || !(await verifyHash(password, user.hash))) {
return reply.code(401).send({ error: 'Invalid credentials' })
}
// ... sign tokens (next scene)
})توقيع رمز الوصول
وقّع رمز وصول قصير الأجل يتضمن معرّف المستخدم وأقل قدر ممكن من المطالبات. اجعل مدة الصلاحية قصيرة (مثل 15 دقيقة).
const accessToken = app.jwt.sign(
{ sub: user.id, role: user.role },
{ expiresIn: '15m' }
)توقيع رمز التحديث
وقّع رمز تحديث طويل الأجل يتضمن علامة مميزة في الحمولة (أو استخدم سرًا منفصلًا). ويُستخدم هذا الرمز حصريًا في مسار التحديث.
const refreshToken = app.jwt.sign(
{ sub: user.id, type: 'refresh' },
{ expiresIn: '7d' }
)رمز التحديث في ملف تعريف ارتباط httpOnly
خزّن رمز التحديث في ملف تعريف ارتباط آمن بخصائص httpOnly وSameSite وSecure. لا تستطيع JavaScript قراءته، مما يحد من سرقته عبر XSS، ويرسله المتصفح تلقائيًا إلى مسار التحديث.
reply.setCookie('refreshToken', refreshToken, {
httpOnly: true,
sameSite: 'strict',
secure: true, // HTTPS only
path: '/auth/refresh',
maxAge: 60 * 60 * 24 * 7
})إعادة رمز الوصول في جسم الاستجابة
يُعاد رمز الوصول في جسم استجابة JSON. ويحتفظ به تطبيق Vue في الذاكرة (وليس في localStorage) ويرفقه بطلبات API. ولا يظهر رمز التحديث مطلقًا في الجسم.
return reply.send({
accessToken,
user: { id: user.id, name: user.name }
})
// refreshToken is only in the httpOnly cookieلماذا لا تخزّن رموز الوصول في localStorage
يمكن لأي نص برمجي قراءة localStorage، لذلك قد يؤدي وجود ثغرة XSS إلى سرقة الرمز المخزّن فيه. ويقلل الاحتفاظ برمز الوصول في ذاكرة JavaScript ورمز التحديث في ملف تعريف ارتباط httpOnly من نطاق الضرر الناتج عن XSS.
مسار التحديث
يقرأ POST /auth/refresh رمز التحديث من ملف تعريف الارتباط، ويتحقق منه، ثم يصدر رمز وصول جديدًا. ويعيد رمز الوصول الجديد في الجسم.
app.post('/auth/refresh', async (req, reply) => {
const token = req.cookies.refreshToken
if (!token) return reply.code(401).send()
try {
const payload = app.jwt.verify(token)
const accessToken = app.jwt.sign(
{ sub: payload.sub }, { expiresIn: '15m' }
)
return reply.send({ accessToken })
} catch {
return reply.code(401).send({ error: 'Invalid refresh' })
}
})حماية المسارات
أضف preHandler يتحقق من رمز الوصول الموجود في ترويسة Authorization. ترمي request.jwtVerify() الخاصة بـ @fastify/jwt خطأً عند وجود رمز غير صالح أو منتهي الصلاحية، فتُعاد الاستجابة 401.
app.get('/api/me', {
preHandler: async (req, reply) => {
try { await req.jwtVerify() }
catch { reply.code(401).send({ error: 'Unauthorized' }) }
}
}, async (req) => getProfile(req.user.sub))تسجيل الخروج: مسح ملف تعريف الارتباط
يمسح تسجيل الخروج ملف تعريف ارتباط التحديث، فلا يعود بالإمكان استخدامه لإنشاء رموز وصول. ولضمان أقوى، تتبّع رموز التحديث وألغِها أيضًا من جهة الخادم (باستخدام قائمة حظر أو التدوير).
app.post('/auth/logout', async (req, reply) => {
reply.clearCookie('refreshToken', { path: '/auth/refresh' })
return reply.send({ ok: true })
})اختبار سريع
اختبر مدى فهمك لمصادقة JWT.
مراجعة
لقد تعلمت تسجيل الدخول والتحديث باستخدام JWT:
- رمز وصول قصير الأجل + رمز تحديث طويل الأجل
- يتحقق
POST /auth/loginمن بيانات الاعتماد ويوقّع الرمزين - يوضع رمز التحديث في ملف تعريف ارتباط آمن بخصائص httpOnly SameSite Secure
- يُعاد رمز الوصول في الجسم ويُحفظ في ذاكرة JavaScript
- ينشئ
POST /auth/refreshرمز وصول جديدًا من ملف تعريف الارتباط
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 42
- الدروس
- 156
الأسئلة الشائعة
هل درس «مصادقة JWT: تسجيل الدخول والتحديث» مجاني؟
نعم — نص درس «مصادقة JWT: تسجيل الدخول والتحديث» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «مصادقة JWT: تسجيل الدخول والتحديث»؟
تدفق access token وrefresh token، وملفات تعريف ارتباط httpOnly، والتحديث الصامت باستخدام interceptors تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «مصادقة JWT: تسجيل الدخول والتحديث»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- Fastify Backend لتطبيقات Vue SPA
- مصادقة JWT: تسجيل الدخول والتحديث
- استدعاءات API الموثّقة باستخدام Axios Interceptors
- نشر Vue كامل المكدس في الإنتاج