当前位置：首页 > VUE

如何基于vue实现登录

2026-02-21 14:35:40VUE

安装Vue及相关依赖

确保已安装Node.js环境，通过npm或yarn初始化Vue项目。推荐使用Vue CLI创建项目：

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

安装路由和状态管理库（如Vuex）：

npm install vue-router vuex axios

设计登录页面组件

在src/components下创建Login.vue文件，包含表单结构：

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleSubmit() {
      this.$store.dispatch('login', {
        username: this.username,
        password: this.password
      })
    }
  }
}
</script>

配置Vuex状态管理

在src/store/index.js中设置登录逻辑：

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: localStorage.getItem('token') || '',
    status: ''
  },
  mutations: {
    AUTH_SUCCESS(state, token) {
      state.status = 'success'
      state.token = token
    },
    AUTH_ERROR(state) {
      state.status = 'error'
    }
  },
  actions: {
    login({ commit }, userData) {
      return new Promise((resolve, reject) => {
        axios.post('/api/login', userData)
          .then(res => {
            const token = res.data.token
            localStorage.setItem('token', token)
            commit('AUTH_SUCCESS', token)
            resolve(res)
          })
          .catch(err => {
            commit('AUTH_ERROR')
            localStorage.removeItem('token')
            reject(err)
          })
      })
    }
  }
})

设置路由守卫

在src/router/index.js中添加导航守卫控制访问权限：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Home from '@/components/Home'

Vue.use(Router)

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

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  if (to.matched.some(record => record.meta.requiresAuth)) {
    token ? next() : next('/login')
  } else {
    next()
  }
})

export default router

处理API请求拦截

在src/main.js中配置axios全局拦截器：

import axios from 'axios'

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

样式优化

为登录页面添加基础样式（在Login.vue的<style>部分）：

.login {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
input {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 8px;
}
button {
  background: #42b983;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
}