Vue3实战：从零搭建登录系统，掌握前端鉴权核心技巧

随着前端技术的不断发展，Vue3 已然成为前端开发者必备的技能之一。相较于 Vue2，Vue3 引入了诸多新特性，如 Composition API、基于 Proxy 的响应式系统等，极大地提升了开发效率和代码可维护性。本文将带领大家从零开始，使用 Vue3 搭建一个完整的登录系统，深入理解前端鉴权机制，掌握核心技巧。

一、项目准备

1. 环境搭建

首先，确保已安装 Node.js 和 npm。然后，使用 Vue CLI 创建一个新的 Vue3 项目：

npm install -g @vue/cli
vue create vue3-login-system
cd vue3-login-system

2. 安装依赖

项目创建完成后，安装必要的依赖：

npm install vue-router@4 vuex@4 axios element-plus

vue-router@4：Vue3 版本的路由管理库。
vuex@4：Vue3 版本的状态管理库。
axios：用于发送 HTTP 请求。
element-plus：基于 Vue3 的组件库，用于构建美观的 UI 界面。

二、项目结构

项目的基本结构如下：

src/
├── api/               # API 接口模块
├── assets/            # 静态资源
├── components/        # 公共组件
├── router/            # 路由配置
├── store/             # 状态管理
├── views/             # 页面组件
├── App.vue            # 根组件
└── main.ts            # 入口文件

三、路由配置

在 src/router/index.ts 中配置路由：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from '../views/Home.vue';
import Login from '../views/Login.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

四、状态管理

在 src/store/index.ts 中配置 Vuex：

import { createStore } from 'vuex';

export default createStore({
  state: {
    token: localStorage.getItem('token') || '',
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
      localStorage.setItem('token', token);
    },
  },
  actions: {
    login({ commit }, token) {
      commit('setToken', token);
    },
    logout({ commit }) {
      commit('setToken', '');
    },
  },
});

五、登录界面

在 src/views/Login.vue 中创建登录界面：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="用户名">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleLogin">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';

export default defineComponent({
  setup() {
    const store = useStore();
    const router = useRouter();
    const form = reactive({
      username: '',
      password: '',
    });

    const handleLogin = async () => {
      try {
        // 模拟登录请求
        const response = await axios.post('/api/login', form);
        const { token } = response.data;
        store.dispatch('login', token);
        router.push('/');
      } catch (error) {
        console.error(error);
      }
    };

    return {
      form,
      handleLogin,
    };
  },
});
</script>

六、鉴权拦截

在 src/main.ts 中添加路由守卫，进行鉴权拦截：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

const app = createApp(App);

router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next();
  } else {
    if (store.state.token) {
      next();
    } else {
      next('/login');
    }
  }
});

app.use(router).use(store).mount('#app');

七、API 接口

在 src/api/login.ts 中模拟登录接口：

import axios from 'axios';

export const login = (data: { username: string; password: string }) => {
  return axios.post('/api/login', data);
};

八、总结

通过以上步骤，我们成功搭建了一个基于 Vue3 的登录系统，掌握了前端鉴权的核心技巧。在实际项目中，可以根据具体需求进行扩展，例如添加注册功能、忘记密码功能、第三方登录等。

关键知识点回顾：

Vue3 新特性：Composition API、响应式系统等。
路由管理：使用 vue-router@4 进行路由配置和拦截。
状态管理：使用 vuex@4 管理全局状态，如用户 token。
UI 组件库：使用 element-plus 构建美观的登录界面。
API 请求：使用 axios 发送登录请求。

全部频道

Vue3实战：从零搭建登录系统，掌握前端鉴权核心技巧