当前位置：首页 > VUE

vue实现后台登录

2026-02-20 04:18:50VUE

Vue 实现后台登录功能

创建登录组件

在 src/views 目录下创建 Login.vue 文件，包含表单、输入框和提交按钮。表单需绑定 v-model 实现双向数据绑定。

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

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleLogin() {
      // 登录逻辑
    }
  }
}
</script>

配置路由

在 src/router/index.js 中配置登录页路由，设置为公开路由（无需鉴权）。

vue实现后台登录

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue')
  }
]

实现登录请求

通过 Axios 发送登录请求到后端 API，处理响应并存储 token。

methods: {
  async handleLogin() {
    try {
      const response = await axios.post('/api/login', this.form)
      localStorage.setItem('token', response.data.token)
      this.$router.push('/dashboard')
    } catch (error) {
      alert('登录失败')
    }
  }
}

路由守卫

在路由配置中添加全局前置守卫，检查用户是否已登录。

vue实现后台登录

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

状态管理（可选）

使用 Vuex 集中管理用户登录状态和 token。

const store = new Vuex.Store({
  state: {
    token: null
  },
  mutations: {
    setToken(state, token) {
      state.token = token
    }
  }
})

样式优化

添加基础样式增强用户体验，例如错误提示和加载状态。

.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
.error-message {
  color: red;
}

标签: 后台 vue

分享给朋友：

vue实现按钮刷新

Vue 实现按钮刷新功能在 Vue 中实现按钮刷新功能可以通过多种方式实现，具体取决于刷新需求是局部刷新还是全局刷新。以下是几种常见的方法：使用 window.location.reload()…

vue实现换肤

使用 CSS 变量实现换肤在 Vue 项目中，可以通过 CSS 变量（Custom Properties）动态切换主题色。CSS 变量可以在运行时修改，适合实现换肤功能。定义全局 CSS 变量：…

vue实现布局

Vue 实现布局方法 Vue 提供了多种方式实现页面布局，可以通过组件化、CSS 框架或自定义样式完成。以下是几种常见方法：使用 CSS Flexbox 或 Grid 通过 Vue 单文件组件结…

vue实现flbook

Vue 实现类似 Flbook 的翻页效果要实现类似 Flbook 的翻页效果，可以使用 Vue 结合 CSS 动画和 JavaScript 事件处理。以下是实现方法：安装依赖需要安装 vu…

vue实现popper

Vue 实现 Popper 的方法使用 Tippy.js 库 Tippy.js 是一个轻量级的 Popper.js 封装库，提供丰富的工具提示功能。安装 Tippy.js 及其 Vue 封装：…

vue 实现报价

Vue 实现报价功能在 Vue 中实现报价功能通常涉及前端表单交互、数据计算和与后端 API 的通信。以下是实现报价功能的几种常见方法：表单设计与数据绑定使用 Vue 的 v-model 指…

vue实现后台登录