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

目標(biāo)

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

任務(wù)概覽

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

詳細(xì)步驟

1. Django后端設(shè)置

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

• 配置REST_FRAMEWORK在settings.py中添加Token認(rèn)證。

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

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

2. Vue.js前端應(yīng)用

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

• 使用Vue CLI創(chuàng)建新項(xiàng)目。
• 設(shè)置Vue Router進(jìn)行頁(yè)面路由。

// 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管理應(yīng)用狀態(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) {// 實(shí)現(xiàn)登錄邏輯},logout({ commit }) {// 實(shí)現(xiàn)登出邏輯},},
});

4. 用戶認(rèn)證流程

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

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

// Vuex actions中實(shí)現(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);});
},

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

// Vue Router導(dǎo)航守衛(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();}
});

學(xué)習(xí)要點(diǎn)

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

每日回顧

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

通過(guò)今天的學(xué)習(xí)，你應(yīng)該能夠?qū)崿F(xiàn)一個(gè)基本的用戶認(rèn)證流程，并通過(guò)Vuex管理用戶認(rèn)證狀態(tài)。明天，我們將繼續(xù)深入Vue.js和Vuex，學(xué)習(xí)如何實(shí)現(xiàn)更復(fù)雜的數(shù)據(jù)交互和狀態(tài)管理。