当前位置：首页 > 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 中配置登录页路由，设置为公开路由（无需鉴权）。

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('登录失败')
    }
  }
}

路由守卫

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

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
    }
  }
})

样式优化

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

vue实现后台登录

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

标签: 后台 vue

分享给朋友：

vue实现录音文件播放

使用 Vue 实现录音文件播放准备工作确保项目中已安装必要的依赖，如 vue-audio-recorder 或原生 Web Audio API。录音文件播放通常涉及录音、存储和播放三个核心环节。…

vue实现付款

Vue 实现付款功能在 Vue 中实现付款功能通常需要集成第三方支付网关（如支付宝、微信支付、Stripe 等）。以下是常见的实现方法：集成支付宝/微信支付安装必要的依赖（如 axios 用于…

vue实现主页

Vue 实现主页的基本步骤创建一个 Vue 主页通常涉及以下几个关键步骤，从项目初始化到页面布局和功能实现。初始化 Vue 项目使用 Vue CLI 或 Vite 初始化项目。Vue CLI…

vue slot实现

vue slot 的实现方法在 Vue 中，slot 是一种内容分发机制，允许父组件向子组件传递模板内容。以下是几种常见的 slot 实现方式：默认 slot 默认 slot 是最基础的 slo…

vue实现公式

在Vue中实现公式展示或计算可以通过多种方式实现，以下为具体方法：使用模板插值与计算属性若公式较简单，可直接在模板中使用插值表达式或计算属性。例如计算圆的面积： <templat…

vue实现list

Vue 实现列表渲染在 Vue 中，可以使用 v-for 指令来渲染列表。v-for 指令基于一个数组或对象来渲染一个列表，可以遍历数组或对象的属性。基本列表渲染 <template>…

vue实现后台登录