第12天：前端集成与Django后端 - 用户认证与状态管理

第12天：前端集成与Django后端 - 用户认证与状态管理

目标

整合Django后端与Vue.js前端，实现用户认证和应用状态管理。

任务概览

1. 设置Django后端用户认证。
2. 创建Vue.js前端应用。
3. 使用Vuex进行状态管理。
4. 实现前端与后端的用户认证流程。

详细步骤

1. Django后端设置

确保Django后端具备用户认证和Token认证系统。

• 配置REST_FRAMEWORK在settings.py中添加Token认证。

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

• 创建用户认证相关的API端点（登录、登出、用户信息获取）。

2. Vue.js前端应用

使用Vue.js创建前端应用。

• 使用Vue CLI创建新项目。
• 设置Vue Router进行页面路由。

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

3. Vuex状态管理

在Vue.js中使用Vuex管理应用状态。

• 安装Vuex并创建store。

npm install vuex@next --save

• 配置Vuex store。

// store/index.js

import { 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) {
      // 实现登录逻辑
    },
    logout({ commit }) {
      // 实现登出逻辑
    },
  },
});

4. 用户认证流程

实现前端登录和登出逻辑，与Django后端交互。

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

// Vuex actions中实现登录

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路由，实现基于状态的导航守卫。

// Vue Router导航守卫

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后端用户认证系统的配置和使用。
• Vue.js前端应用的创建和Vue Router的使用。
• Vuex在状态管理中的应用。
• 前后端用户认证流程的实现。

每日回顾

• 确保Django后端API能够处理认证请求并返回正确的响应。
• 测试Vue.js前端是否能够正确处理用户登录和登出，以及状态的更新。

通过今天的学习，你应该能够实现一个基本的用户认证流程，并通过Vuex管理用户认证状态。明天，我们将继续深入Vue.js和Vuex，学习如何实现更复杂的数据交互和状态管理。