أبحث عن أسهل طريق لعمل Access Control Listلإطار Vuejs

[sniperadmin]

Update###
كود الstore الحالي:

مثلما في الصورة عملت gitter اسمه total بيحسب طول المصفوفة
لكن الكونسول بيطلع 0 (صفر)
وفي نفس الوقت vuex dev يظهر المصفوفة:

وهنا الـ payload غير معرف:

ربما أكون قد فقدت التركيز… لم أنم منذ 20 ساعة

[Alhakem]

ماهي الاخبار وين وصلت بالمشروع؟

[sniperadmin]

الحمد لله درست الvuex جيدا !
حاليا وقفت التصميم وأعمل على تأمين التطبيق باستخدام JWT authentication

قمت بعمل اختبار register و login و هذه هي النتيجة:

الجزء الصعب هنا هو كيفية حفظ الtoken للمستخدم… حيث أنني لا استطيع تصفح أي رابط الا في حالة التصريح بالدخول مثلما طبقت هنا:

وهذه صورة لمحاولة الدخول بواسطة GET request على صفحة الhome بدون الtoken

ما فهمته من التجربة هو ان المستخدم لا يستطيع حتى تسجيل خروج بعد الدخول وذلك لانه خرج أصلا في لحظتها وذلك لعدم توافر تصريح الدخول في السيرفر… والآن أحاول ان ابحث عن كيفية الاحتفاظ بالtokens حتى استطيع الدخول الى صفحاتي الجميلة

الكلام كثير جدا على الانترنت بخصوص هذا الشأن … لا باس لو تفيدوني

[sniperadmin]

حصل معي stuck

[Alhakem]

عندما تشتغل على الـ Authentication لازم نشتغل على شيئين:

1- تخزين الـ Token
2- توجية المستخدم بعد عملية الـ Authentication سواء بالسماح له بالدخول لصفحات معينة او عدم السماح له حسب صلاحياته

لذا في الخطوة الأولى بعد ما يقوم المستخدم بإدخال الإسم والباسورد بشكل صحيح ستقوم بأخذ الـ Token وتخزنها في الـ Localstorage وتحطها على الـ state بالـ Vuxe.

const state = {
  token: localStorage.getItem('token') || ''
}

(تذكر ان إضافة الـ Token سيكون عندما قام بتسجيل الدخول الكود اعلاة فقط يقوم بتشييك الـ Localstorsge اذا ما كان فيه token ام لا )

ممتاز، الأن بإمكاننا إستخدام هذه الprop في الخطو الثانية والتي هي توجية المستخدم والتأكد من صلاحياته.

راح تعمل getter يجلب لك ما إن كان العضو مصرح له ام غير مصرح له بالشكل التالي:

const getters = {
  isAuthenticated: state => !!state.token
}

لاحظ كيف نشيك انه اذا في Token حينها isAuthenticated بتكون تساوي true والا بتكون false

الان راح نستخدم هذه الـgetter في الـ routing وتقدر تستخدم الـmeta او beforeEnter لعمل الـ naviguation guards الي راح تمنع او تسمح للشخص انه يدخل على route معين.

مثلاً في صفحة العضو بتقوم بالتالي:

 routes: [
    {
      path: '/account',
      name: 'Account',
      component: Account,
      beforeEnter: isAuthenticated
    }
  ]

const isAuthenticated = (to, from, next) => {
  if (store.getters.isAuthenticated) {
    next()
    return
  }
  next('/login')
}

لاحظ في isAuthenticated نشيك اذا كان الـ store.getters.isAuthenticated يساوي true معناته انه المستخدم مسجل دخول وفي عندة token لذا راح يسمح له بالدخول للصفحة بالـ next() والا سيتم أخذة لصفحة login لانه مافيش token مسجلة له next('/login')

وعندما يعمل تسجيل خروج ستقوم بمسح الـ Token

localStorage.removeItem('token')

هذه هي ابسط صورة لعملية الـ Authentication بدون الأخذ بالإعتبارات الأخرى كالتعامل مع الـ token المنتهية وما خلافة.

لذا استوعب هذا المنطق البسيط وقم بتطبيقة ومن ثم إقرأ مجدداً على هذا الموضوع وقم بتحسينه حسب متطلبات مشروعك

[sniperadmin]

في ال store طبقت التالي:

 state: {
        isLoggedIn: !!localStorage.getItem('token'),
    },
mutations:{
        loginUser(state){
            state.isLoggedIn = true;
        },
        logoutUser(state) {
            state.isLoggedIn = false;
        }
    },

بعد بحث طويل البارحة استخدمت VueAuth وأنشأت الconfiguration كالتالي:

Auth.js

import bearer from '@websanova/vue-auth/drivers/auth/bearer'
import axios from '@websanova/vue-auth/drivers/http/axios.1.x'
import router from '@websanova/vue-auth/drivers/router/vue-router.2.x'

/**
 * Authentication configuration, some of the options can be override in method calls
 */
const config = {
  auth: bearer,
  http: axios,
  router: router,
  tokenDefaultName: 'laravel-jwt-auth',
  tokenStore: ['localStorage'],
  
  // API endpoints used in Vue Auth.
  registerData: {
    url: 'auth/register', 
    method: 'POST', 
    redirect: '/login'
  },
  loginData: {
    url: 'auth/login', 
    method: 'POST', 
    redirect: '', 
    fetchUser: true
  },
  logoutData: {
    url: 'auth/logout', 
    method: 'POST', 
    redirect: '/', 
    makeRequest: true
  },
  fetchData: {
    url: 'auth/user', 
    method: 'GET', 
    enabled: true
  },
  refreshData: {
    url: 'auth/refresh', 
    method: 'GET', 
    enabled: true, 
    interval: 30
  }
}
export default config

لفت انتباهي أنني أستخدم login الخاص ب Laravel
أنشأت login form جديدة وكتبت التالي:

methods: {
       submitLogin() {
          this.loginError = false;
          axios.post('auth/login', {
              email: this.email,
              password: this.password
          }).then(response => {
              // login user, store the token and redirect to dashboard
              store.commit('loginUser')
              localStorage.setItem('token', response.data.access_token)
              this.$router.push({ name: 'dashboard' })
          }).catch(error => {
              this.loginError = true
          });
       }
    }

النتيجة:

[sniperadmin]

تحديث#
الان استطعت التنفيذ بشكل صحيح

المشكلة انه اذا أرسلت GET لصفحة login يفتح لي الlogin في Laravel ولا يفتح صفحة الapplication التي صممتها

المتصفح عمل redirect على صفحة الdashboard لكن لا تظهر بسبب هذه المشكلة

[sniperadmin]

تلخيص الوضع الحالي: