当前位置：首页 > VUE

vue连接实现登录功能

2026-01-22 02:06:09VUE

安装必要依赖

确保项目已安装 Vue.js 和 Axios（用于 HTTP 请求）。通过以下命令安装 Axios：

npm install axios

创建登录组件

在 Vue 组件中，设计登录表单，包含用户名和密码输入框，以及提交按钮。示例代码如下：

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async handleLogin() {
      try {
        const response = await axios.post('/api/login', {
          username: this.username,
          password: this.password
        });
        localStorage.setItem('token', response.data.token);
        this.$router.push('/dashboard'); // 跳转到登录后页面
      } catch (error) {
        console.error('登录失败:', error);
      }
    }
  }
}
</script>

配置后端接口

确保后端提供 /api/login 接口，接收用户名和密码，验证后返回 token 或错误信息。接口需支持跨域请求（CORS）。

处理登录状态

登录成功后，将 token 存储到 localStorage 或 Vuex 中，用于后续请求的鉴权。示例中使用了 localStorage。

路由跳转

通过 Vue Router 实现登录后的页面跳转。在 router/index.js 中配置路由：

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

添加路由守卫

在路由全局守卫中检查登录状态，未登录用户访问受限路由时重定向到登录页：

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