অটেনটিকেশন এবং অথরাইজেশন

Vue.js এ অটেনটিকেশন এবং অথরাইজেশন এমন দুটি গুরুত্বপূর্ণ ফিচার যা আপনার অ্যাপ্লিকেশনকে নিরাপদ এবং পরিচালনাযোগ্য রাখে। অটেনটিকেশন হল একটি ব্যবহারকারীর পরিচয় যাচাই করা, এবং অথরাইজেশন হল নির্ধারণ করা যে সেই ব্যবহারকারী কী করতে পারবে। এই টিউটোরিয়ালে, Vue.js অ্যাপ্লিকেশনে অটেনটিকেশন এবং অথরাইজেশন ব্যবস্থার কিভাবে বাস্তবায়ন করবেন তা বিস্তারিতভাবে আলোচনা করা হবে।

১. অটেনটিকেশন (Authentication)

অটেনটিকেশন হল একটি প্রক্রিয়া যেখানে ব্যবহারকারীর পরিচয় যাচাই করা হয়, যেমন লগইন প্রক্রিয়া। এটি সাধারণত ইউজারনেম এবং পাসওয়ার্ড এর মাধ্যমে করা হয়, তবে এখন বেশ কিছু আধুনিক পদ্ধতি যেমন OAuth, JWT (JSON Web Tokens) ইত্যাদিও ব্যবহার করা হয়।

অটেনটিকেশন প্রক্রিয়া:

1. ব্যবহারকারী লগইন ফর্মে ইউজারনেম এবং পাসওয়ার্ড প্রদান করে।
2. ব্যাকএন্ড সার্ভার ব্যবহারকারীর প্রমাণিত তথ্য যাচাই করে।
3. যদি প্রমাণ সঠিক হয়, সার্ভার একটি টোকেন (JWT) প্রদান করে যা ক্লায়েন্ট (Vue.js অ্যাপ্লিকেশন) সঞ্চয় করে।
4. পরবর্তীতে, ক্লায়েন্ট এই টোকেনটি ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনে প্রমাণীকৃতভাবে প্রবেশ করে।

Vue.js-এ লগইন ফর্ম:

<div id="app">
  <form @submit.prevent="login">
    <input v-model="username" type="text" placeholder="Username" />
    <input v-model="password" type="password" placeholder="Password" />
    <button type="submit">Login</button>
  </form>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      username: '',
      password: ''
    },
    methods: {
      login() {
        // API কল বা JWT টোকেন সংগ্রহের প্রক্রিয়া
        const credentials = { username: this.username, password: this.password };
        axios.post('https://example.com/api/login', credentials)
          .then(response => {
            // লগইন সফল হলে JWT টোকেন গ্রহণ করা
            localStorage.setItem('auth_token', response.data.token);
            alert('Logged in successfully!');
          })
          .catch(error => {
            alert('Login failed!');
          });
      }
    }
  });
</script>

এখানে, আমরা ব্যবহারকারীর ইউজারনেম এবং পাসওয়ার্ড সংগ্রহ করছি, এবং একটি API কল করে সার্ভার থেকে JWT টোকেন পাচ্ছি। টোকেনটি localStorage এ সঞ্চয় করা হচ্ছে, যা পরবর্তী রিকোয়েস্টে ব্যবহার করা যাবে।

২. অথরাইজেশন (Authorization)

অথরাইজেশন হল একটি প্রক্রিয়া যেখানে যাচাই করা হয় যে একজন ব্যবহারকারী কি কি অ্যাক্সেস করতে পারবে তার ভিত্তিতে। একবার অটেনটিকেশন সফল হলে, অথরাইজেশন পরবর্তী পদক্ষেপ। সাধারণত ব্যবহারকারীর রোল (admin, user, guest) এর ভিত্তিতে কী ধরনের অ্যাক্সেস দেওয়া হবে তা নির্ধারণ করা হয়।

Vue.js-এ অথরাইজেশন বাস্তবায়ন:

অথরাইজেশন ব্যবস্থার জন্য, আমরা ব্যবহারকারীর রোল (যেমন, admin, user) এবং সার্ভারের মাধ্যমে প্রাপ্ত JWT টোকেনের মাধ্যমে অ্যাক্সেস নিয়ন্ত্রণ করতে পারি।

// Vue.js অ্যাপ্লিকেশন
new Vue({
  el: '#app',
  data: {
    userRole: '',
    isLoggedIn: false
  },
  created() {
    // localStorage থেকে JWT টোকেন নিয়ে লগইন চেক করা
    const token = localStorage.getItem('auth_token');
    if (token) {
      this.isLoggedIn = true;
      // টোকেন যাচাই এবং ব্যবহারকারীর রোল নির্ধারণ
      axios.get('https://example.com/api/verify-token', { headers: { Authorization: `Bearer ${token}` } })
        .then(response => {
          this.userRole = response.data.role;  // যেমন 'admin', 'user'
        })
        .catch(error => {
          this.isLoggedIn = false;
          alert('Token is invalid!');
        });
    }
  },
  methods: {
    logout() {
      localStorage.removeItem('auth_token');
      this.isLoggedIn = false;
      this.userRole = '';
    }
  }
});

এখানে, আমরা localStorage থেকে JWT টোকেন নিয়ে সার্ভারের সাথে যাচাই করি এবং এর মাধ্যমে ব্যবহারকারীর রোল চেক করি। তারপর, সেই রোলের ভিত্তিতে অ্যাপ্লিকেশনের বিভিন্ন অংশে অ্যাক্সেস নিয়ন্ত্রণ করা হয়। যেমন, শুধুমাত্র অ্যাডমিন রোলের ব্যবহারকারীকে অ্যাডমিন প্যানেল অ্যাক্সেস দেওয়া হবে।

অ্যাডমিন রোলের জন্য কন্ডিশনাল রেন্ডারিং:

<div v-if="isLoggedIn && userRole === 'admin'">
  <h2>Admin Dashboard</h2>
  <p>Welcome, Admin!</p>
</div>

<div v-if="isLoggedIn && userRole === 'user'">
  <h2>User Dashboard</h2>
  <p>Welcome, User!</p>
</div>

<div v-if="!isLoggedIn">
  <h2>Please Log in</h2>
</div>

এখানে, v-if ডিরেকটিভের মাধ্যমে, আমরা ব্যবহারকারীর রোল অনুযায়ী কন্টেন্ট রেন্ডার করি। যদি ব্যবহারকারী admin হয়, তাহলে শুধুমাত্র Admin Dashboard দেখা যাবে, আর যদি user হয়, তাহলে User Dashboard দেখা যাবে।

৩. Vue.js এ রোল ভিত্তিক রাউটিং

আপনি Vue Router ব্যবহার করে রোল ভিত্তিক রাউটিং ব্যবস্থা করতে পারেন। এতে, কেবলমাত্র নির্দিষ্ট রোলের ব্যবহারকারীরা কিছু নির্দিষ্ট রাউট বা পেজ অ্যাক্সেস করতে পারবে।

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/admin',
    component: AdminDashboard,
    beforeEnter: (to, from, next) => {
      if (localStorage.getItem('auth_token') && this.userRole === 'admin') {
        next();
      } else {
        next('/');  // Redirect to Home if not admin
      }
    }
  }
];

এখানে, /admin রাউটের জন্য একটি beforeEnter গার্ড ব্যবহার করা হয়েছে, যা নিশ্চিত করে যে কেবলমাত্র admin রোলের ব্যবহারকারীরাই অ্যাডমিন প্যানেলে প্রবেশ করতে পারবে। যদি ব্যবহারকারী admin না হন, তাহলে তাকে হোম পেজে রিডিরেক্ট করা হবে।

সারাংশ

• অটেনটিকেশন হল একটি ব্যবহারকারীর পরিচয় যাচাই করা, যা সাধারণত ইউজারনেম এবং পাসওয়ার্ডের মাধ্যমে করা হয়, এবং JWT টোকেন ব্যবহৃত হয়।
• অথরাইজেশন হল নির্ধারণ করা যে ব্যবহারকারী কোন রিসোর্সে অ্যাক্সেস করতে পারবে বা পারবে না, যা সাধারণত ব্যবহারকারীর রোলের ভিত্তিতে করা হয়।
• Vue.js-এ অটেনটিকেশন এবং অথরাইজেশন বাস্তবায়ন করতে আপনি JWT, রোল ভিত্তিক রাউটিং এবং কন্ডিশনাল রেন্ডারিং ব্যবহার করতে পারেন।

এই পদ্ধতিগুলো ব্যবহার করে আপনি আপনার Vue.js অ্যাপ্লিকেশনে নিরাপত্তা এবং অ্যাক্সেস কন্ট্রোল সহজেই বাস্তবায়ন করতে পারবেন।