第12天：前端集成與Django后端 - 用戶認證與狀態(tài)管理

目標

整合Django后端與Vue.js前端，實現(xiàn)用戶認證和應用狀態(tài)管理。

任務概覽

1. 設置Django后端用戶認證。
2. 創(chuàng)建Vue.js前端應用。
3. 使用Vuex進行狀態(tài)管理。
4. 實現(xiàn)前端與后端的用戶認證流程。

詳細步驟

1. Django后端設置

確保Django后端具備用戶認證和Token認證系統(tǒng)。

• 配置REST_FRAMEWORK在settings.py中添加Token認證。

REST_FRAMEWORK = {'DEFAULT_AUTHENTICATION_CLASSES': ['rest_framework.authentication.TokenAuthentication',],
}

• 創(chuàng)建用戶認證相關的API端點（登錄、登出、用戶信息獲取）。

2. Vue.js前端應用

使用Vue.js創(chuàng)建前端應用。

• 使用Vue CLI創(chuàng)建新項目。
• 設置Vue Router進行頁面路由。

// Vue Router配置
const router = new VueRouter({routes: [{ path: '/login', component: Login },{ path: '/home', component: Home, meta: { requiresAuth: true } },// 其他路由...],
});

3. Vuex狀態(tài)管理

在Vue.js中使用Vuex管理應用狀態(tài)。

• 安裝Vuex并創(chuàng)建store。

npm install vuex@next --save

• 配置Vuex store。

// store/index.jsimport { createStore } from 'vuex';export default createStore({state: {isAuthenticated: false,userData: null,},mutations: {setAuthState(state, { isAuthenticated, userData }) {state.isAuthenticated = isAuthenticated;state.userData = userData;},},actions: {login({ commit }, credentials) {// 實現(xiàn)登錄邏輯},logout({ commit }) {// 實現(xiàn)登出邏輯},},
});

4. 用戶認證流程

實現(xiàn)前端登錄和登出邏輯，與Django后端交互。

• 使用Fetch API與Django后端API通信。

// Vuex actions中實現(xiàn)登錄login({ commit }, credentials) {fetch('/api/auth/login/', {method: 'POST',body: JSON.stringify(credentials),headers: { 'Content-Type': 'application/json' },}).then(response => response.json()).then(data => {commit('setAuthState', { isAuthenticated: true, userData: data.user });localStorage.setItem('authToken', data.token);});
},

• 保護Vue路由，實現(xiàn)基于狀態(tài)的導航守衛(wèi)。

// Vue Router導航守衛(wèi)router.beforeEach((to, from, next) => {const requiresAuth = to.matched.some(route => route.meta.requiresAuth);const isAuthenticated = store.state.isAuthenticated;if (requiresAuth && !isAuthenticated) {next('/login');} else {next();}
});

學習要點

• Django后端用戶認證系統(tǒng)的配置和使用。
• Vue.js前端應用的創(chuàng)建和Vue Router的使用。
• Vuex在狀態(tài)管理中的應用。
• 前后端用戶認證流程的實現(xiàn)。

每日回顧

• 確保Django后端API能夠處理認證請求并返回正確的響應。
• 測試Vue.js前端是否能夠正確處理用戶登錄和登出，以及狀態(tài)的更新。

通過今天的學習，你應該能夠實現(xiàn)一個基本的用戶認證流程，并通過Vuex管理用戶認證狀態(tài)。明天，我們將繼續(xù)深入Vue.js和Vuex，學習如何實現(xiàn)更復雜的數(shù)據(jù)交互和狀態(tài)管理。