当前位置：首页 > VUE

vue cli实现登录

2026-02-19 23:42:57VUE

Vue CLI 实现登录功能

安装 Vue CLI 并创建项目
确保已安装 Node.js 和 npm，通过以下命令安装 Vue CLI：

npm install -g @vue/cli
vue create login-project
cd login-project

安装必要依赖
安装 axios 用于 HTTP 请求和 vue-router 用于路由管理：

npm install axios vue-router

配置路由
在 src/router/index.js 中配置登录和主页路由：

vue cli实现登录

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

const routes = [
  { path: '/login', component: Login },
  { path: '/', component: Home, meta: { requiresAuth: true } }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token');
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

export default router;

创建登录页面
在 src/views/Login.vue 中实现登录表单和逻辑：

<template>
  <div>
    <h2>登录</h2>
    <form @submit.prevent="handleLogin">
      <input v-model="username" placeholder="用户名" />
      <input v-model="password" type="password" placeholder="密码" />
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async handleLogin() {
      try {
        const response = await axios.post('https://api.example.com/login', {
          username: this.username,
          password: this.password
        });
        localStorage.setItem('token', response.data.token);
        this.$router.push('/');
      } catch (error) {
        alert('登录失败');
      }
    }
  }
};
</script>

创建主页
在 src/views/Home.vue 中实现受保护的主页内容：

vue cli实现登录

<template>
  <div>
    <h2>欢迎</h2>
    <button @click="handleLogout">退出登录</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleLogout() {
      localStorage.removeItem('token');
      this.$router.push('/login');
    }
  }
};
</script>

配置全局 axios 拦截器
在 src/main.js 中设置请求拦截器以携带 token：

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

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

const app = createApp(App);
app.use(router);
app.mount('#app');

运行项目
启动开发服务器并测试登录功能：