Êy zoo lại là mình đây, nếu bạn đang làm auth và phải mò mẫm làm sao cho hệ thống hoạt động mượt mà và chuẩn xác nhất khi code vuejs thì đây là một bài viết bạn có thể lưu ý ^^ ## 1. Cấu Trúc Thư Mục Trước khi bắt đầu, chúng ta cần thiết lập cấu trúc thư mục gọn gàng để dễ quản lý src : src/ ├── service/ │ └── auth.js │ └── auth-header.js ├── stores/ │ └── auth.js ├── views/ │ ├── Login.vue │ └── Register.vue ├── router/ │ └── index.js ├── utils/ │ └── request.js ├── App.vue └── main.js *Thấy đẹp không quý zị, nhờ GPT vẽ cho đấy 👀️* * **auth.service.js**: File xử lý các request liên quan đến authentication. * **auth-header.js**: Tạo header cho các request API cần xác thực. * **auth.js**: Pinia store dùng để quản lý trạng thái người dùng và token. * **request.js**: Quản lý Axios instance với các interceptor. * **Login.vue**: Giao diện trang đăng nhập. * **Register.vue**: Giao diện trang đăng ký. --- Không thể quên việc cài thư viện Pinia và Axios nhé mấy men: npm install pinia axios ## 2. Cấu Hình `main.js` ``` import { createApp } from 'vue'; import { createPinia } from 'pinia'; import App from './App.vue'; import router from './router'; const app = createApp(App); const pinia = createPinia(); app.use(pinia); app.use(router); app.mount('#app'); ``` **Import và Tạo Pinia**: * `createPinia()`: Tạo một Pinia instance để quản lý trạng thái toàn cục. * `app.use(pinia)`: Đăng ký Pinia với ứng dụng Vue. **Import và Sử dụng Router**: * `import router from './router'`: Import router đã được cấu hình từ file `router/index.js`. * `app.use(router)`: Đăng ký router với ứng dụng Vue. **Mount App**: * `app.mount('#app')`: Gắn ứng dụng vào phần tử DOM có id là `app` (thường là trong file `index.html`). ## 3. Tạo Pinia store để quản lý các trạng thái Huh vậy là xong phần cấu hình bây giờ chúng ta sẽ bắt đầu vào phần tạo store để quản lý các state cho việc đăng ký đăng nhập, nếu từng làm việc với Vuex khi chuyển qua Pinia bạn sẽ thấy mọi thứ được tinh gọn giúp chúng ta code nhanh và hiệu quả hơn Tạo file `auth.js` trong thư mục `store/` ```javascript import { defineStore } from 'pinia'; import { ref } from 'vue'; import AuthService from '@/services/auth.service'; export const useAuthStore = defineStore('auth', () => { const user = ref(null); const token = ref(localStorage.getItem('token') || null); const isAuthenticated = ref(!!token.value); const login = async (credentials) => { try { const response = await AuthService.login(credentials); user.value = response.data.user; token.value = response.data.token; isAuthenticated.value = true; localStorage.setItem('token', token.value); } catch (error) { console.error('Login failed:', error); throw error; } }; const logout = () => { user.value = null; token.value = null; isAuthenticated.value = false; localStorage.removeItem('token'); }; return { user, token, isAuthenticated, login, logout, }; }); ``` * **user**: Lưu thông tin người dùng sau khi đăng nhập thành công. * **token**: Lưu token được trả về từ server sau khi đăng nhập. * **isAuthenticated**: Kiểm tra xem người dùng đã đăng nhập hay chưa. * **login**: Hàm xử lý đăng nhập, gọi API và cập nhật trạng thái. * **logout**: Hàm xử lý đăng xuất, xóa thông tin người dùng và token. ## 4. Xử Lý API Với Axios Để giao tiếp với backend, chúng ta sẽ sử dụng Axios. Trong thư mục `services/`, tạo file `auth.service.js` và thêm đoạn code sau: ``` import axios from 'axios'; import { useAuthStore } from '@/stores/auth'; const API_URL = 'http://api-demo/api/auth'; const login = async (credentials) => { const response = await axios.post(`${API_URL}/login`, credentials); return response.data; }; const register = async (userData) => { const response = await axios.post(`${API_URL}/register`, userData); return response.data; }; const logout = async () => { const authStore = useAuthStore(); authStore.logout(); }; export default { login, register, logout, }; ``` * **login**: Gửi thông tin đăng nhập đến server và nhận về token cùng thông tin người dùng. * **register**: Gửi thông tin đăng ký đến server. * **logout**: Xóa thông tin người dùng và token khỏi store và localStorage. ## 5. Tạo Auth Header Khi gọi các API yêu cầu xác thực, chúng ta cần thêm token vào header của request. Nếu không các bạn sẽ gặp qua trường hợp sau khi reload lại trang thì token không được set lại và không thể xác thực với server Tạo file `auth-header.js` trong thư mục `services/`: ``` import { useAuthStore } from '@/stores/auth'; export default function authHeader() { const authStore = useAuthStore(); const token = authStore.token; if (token) { return { Authorization: `Bearer ${token}` }; } else { return {}; } } ``` Hàm này sẽ trả về header chứa token nếu người dùng đã đăng nhập. ## 6. Cấu Hình Axios Instance Và Interceptors Để tự động thêm token vào các request và xử lý lỗi, chúng ta sẽ tạo một Axios instance với các interceptor. Tạo file `request.js` trong thư mục `utils/`: ``` import axios from 'axios'; import authHeader from '@/services/auth-header'; const api = axios.create({ baseURL: 'http://your-api-url.com/api', }); api.interceptors.request.use((config) => { const headers = authHeader(); if (headers.Authorization) { config.headers = headers; } return config; }); api.interceptors.response.use( (response) => response, (error) => { if (error.response.status === 401) { const authStore = useAuthStore(); authStore.logout(); window.location.href = '/login'; } return Promise.reject(error); } ); export default api; ``` * **request interceptor**: Tự động thêm token vào header của mỗi request. * **response interceptor**: Xử lý lỗi 401 (Unauthorized) bằng cách đăng xuất người dùng và chuyển hướng đến trang đăng nhập. ## 7. Tạo Trang Đăng Nhập Và Đăng Ký ### Mình sẽ tạo một UI đơn giản để cho người dùng đăng nhập (`Login.vue`) ``` ``` ### Trang đăng ký cũng tương tự (`Register.vue`) ``` ``` ## 8. Cấu Hình Router Cuối cùng, chúng ta cần cấu hình router để bảo vệ các route yêu cầu xác thực. Trong file `router/index.js`: ``` import import { useAuthStore } from '@/stores/auth'; const routes = [ { path: '/login', component: () => import('@/views/Login.vue'), }, { path: '/register', component: () => import('@/views/Register.vue'), }, { path: '/', component: () => import('@/views/Home.vue'), meta: { requiresAuth: true }, }, ]; const router = createRouter({ history: createWebHistory(), routes, }); router.beforeEach((to, from, next) => { const authStore = useAuthStore(); if (to.meta.requiresAuth && !authStore.isAuthenticated) { next('/login'); } else { next(); } }); export default router; ``` * **requiresAuth**: Meta field để xác định route yêu cầu xác thực. * **beforeEach**: Kiểm tra xem người dùng đã đăng nhập chưa trước khi truy cập vào các route yêu cầu xác thực, nếu chưa login thì đá ra lại trang login. Vậy là chúng ta đã xây dựng xong một hệ thống authentication cơ bản với Vue 3 và Pinia. Bạn có thể mở rộng thêm các tính năng như refresh token, quên mật khẩu, hoặc tích hợp với các dịch vụ OAuth như Google, Facebook. Hy vọng bài viết này hữu ích cho bạn! Nếu có thắc mắc gì, đừng ngần ngại để lại comment nhé ^^. Năm mới không chúc các bạn không bug nhưng nguyện sẽ luôn đồng hành và debug cùng các bạn <3

auth-in-vue-3-pinia

Vue

authenticator

authentication

Xây dựng Hệ Thống Authentication Trong Vue 3 Sử Dụng Pinia

Dưới đây là bài hướng dẫn chi tiết về cách xây dựng một hệ thống Authentication trong Vue 3 với Pinia.