عملية تسجيل الدخول والخروج في React

الأمر بسيط، عملية تسجيل الدخول والخروج في رياكت متعقلة بإرفاق رمز token في الطلبيات المرسلة الى الخادم، فمتى ما غاب هذا الرمز عن الطلبيات تم رفض اتمام الطلبية، نفس المنطق وراء حجب او اظهار بعض الصفحات أو المكونات في رياكت. ولهذا سوف يمكن التحكم في عملية تسجيل الدخول والخروج بناء على حضور هذا الرمز في التطبيق أو مرفقا في ترويسات الطلبيات المرسلة للخادم. 

لنقل أنه يتم استقبال رمز jwt عند ارسال طلبية تسجيل الدخول الى الخادم، بعد ذلك سيتم حفظ هذا الرمز في التخزين المحلي localeStorage لتطبيق رياكت. 

لاحقا، سيتم التحقق مما ان كان رمز jwt موجودا في localeStorage أو لا، فإن كان: تم عرض الصفحة أو قبول التوجيه اليها. وفي حال ما لم يكن، لم يتم عرضها ولم يتم قبول التوجيه اليها. 

في نفس الوقت، يتم اضافة رمز jwt المخزن في localeStorage الى كل طلبية مرسلة الى الخادم في ترويسة Authorization ليتم توثيق الطلبيات من قبل الخادم. 

وبالنسبة لتسجيل الخروج، فستكون العملية أبسط. اذ سنقوم فقط بمحو هذا الرمز من على التخزين المؤقت، ولن يمكن للمستخدم اعادة تسجيل واحد جديد إلا لما يعيد عملية تسجيل الدخول من جديد.

يمكنك تنفيذ ذلك باستخدام Redux , هذا مثال كامل يوضح ما ترديه تماماً :

• أولاً نقوم بإنشاء actions لتعريف login و logout apis  و استخدام jsonwebtoken لنقوم بعمل decode للتوكين المستقبل من api .
  أيضاً لاحظ لاستخدامنا لdispatch لنتمكن من حفظ التوكين في redux slice الذي سوف نقوم بإنشاءها بملف reducer:

// actions.js File
import axios from 'axios';
import jwtDecode from 'jsonwebtoken';

export const login = (username, password) => async (dispatch) => {
  try {
    const response = await axios.post('/api/login', { username, password });
    const token = response.data.token;
    const decodedToken = jwtDecode(token);

    dispatch({
      type: 'LOGIN',
      payload: { token, user: decodedToken },
    });
  } catch (error) {
    console.log(error);
  }
};

export const logout = () => (dispatch) => {
  dispatch({
    type: 'LOGOUT',
  });
};

• ومن ثم نقوم بإنشاء ملف reducer :

// reducer.js File

const initialState = {
  isAuthenticated: false,
  token: null,
  user: null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOGIN':
      return {
        ...state,
        isAuthenticated: true,
        token: action.payload.token,
        user: action.payload.user,
      };
    case 'LOGOUT':
      return {
        ...state,
        isAuthenticated: false,
        token: null,
        user: null,
      };
    default:
      return state;
  }
};

export default reducer;

• ومن ثم نقوم بإنشاء store الخاص بredux.

// store.js File
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducers';

const store = createStore(reducer, applyMiddleware(thunk));

export default store;

والان بعد انشاء redux وحفظ التوكين , يمكننا استخدامها في ملفات login و logout.

• Login :

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { login } from '../redux/actions';

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const dispatch = useDispatch();

  const handleLogin = () => {
    dispatch(login(username, password));
  };

  return (
    <div>
      <h2>Login</h2>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

export default Login;

• Logout :

import React from 'react';
import { useDispatch } from 'react-redux';
import { logout } from '../redux/actions';

const Logout = () => {
  const dispatch = useDispatch();

  const handleLogout = () => {
    dispatch(logout());
  };

  return (
    <div>
      <h2>Logout</h2>
      <button onClick={handleLogout}>Logout</button>
    </div>
  );
};

export default Logout;