当前位置：首页 > VUE

vue实现后台登录

2026-01-19 11:57:59VUE

Vue 实现后台登录功能

创建登录页面组件

在 src/views 目录下创建 Login.vue 文件，包含表单元素和基础样式。表单通常包含用户名、密码输入框和登录按钮。

<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 中配置登录页面的路由，确保未登录用户只能访问登录页面。

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

实现登录认证逻辑

在 handleLogin 方法中调用 API 接口验证用户凭证，成功后存储 token 并跳转到后台首页。

vue实现后台登录

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.path !== '/login' && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

集成状态管理（可选）

对于复杂应用，可使用 Vuex 管理登录状态和用户信息。

vue实现后台登录

// store/modules/auth.js
export default {
  state: {
    token: localStorage.getItem('token') || '',
    user: null
  },
  mutations: {
    setToken(state, token) {
      state.token = token
      localStorage.setItem('token', token)
    }
  }
}

添加表单验证

使用 Vuelidate 或自定义验证规则确保输入有效性。

import { required } from 'vuelidate/lib/validators'

export default {
  validations: {
    form: {
      username: { required },
      password: { required }
    }
  }
}

实现登出功能

清除本地存储的 token 并重定向到登录页。

methods: {
  logout() {
    localStorage.removeItem('token')
    this.$router.push('/login')
  }
}

标签: 后台 vue

分享给朋友：

vue实现用户信息表

Vue 实现用户信息表的方法使用 Vue CLI 创建项目安装 Vue CLI 并初始化项目： npm install -g @vue/cli vue create user-info-tabl…

vue实现$.extend

Vue 实现类似 jQuery 的 $.extend 功能在 Vue 中实现类似 jQuery 的 $.extend 功能，可以通过多种方式完成。$.extend 主要用于合并多个对象的属性，Vue…

vue实现表白

Vue 实现表白页面使用 Vue 可以快速创建一个动态、交互式的表白页面。以下是一个简单的实现方案：基础结构创建一个 Vue 项目或单文件组件，包含以下核心部分： <template&…

vue实现slidedown

Vue 实现 SlideDown 动画效果在 Vue 中实现 SlideDown 效果可以通过 CSS 过渡或动画结合 Vue 的过渡系统完成。以下是几种常见方法：使用 Vue Transiti…

vue 左右滑动实现

Vue 实现左右滑动功能使用 Vue 实现左右滑动功能可以通过多种方式完成，常见的有基于原生 JavaScript 事件监听、第三方库（如 Hammer.js）或 Vue 专用插件（如 vue-to…

vue实现效果展示

Vue 实现效果展示的方法动态数据绑定展示通过 Vue 的响应式特性，实时展示数据变化。例如，表单输入与预览同步： <template> <div> <…

vue实现后台登录