vue登录的实现过程

创建登录页面组件

在Vue项目中创建一个登录页面组件，通常命名为Login.vue。该组件包含表单元素，如用户名和密码输入框，以及提交按钮。

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

定义数据和方法

在组件的<script>部分定义数据属性和方法。数据属性用于绑定表单输入，方法处理登录逻辑。

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async handleLogin() {
      try {
        const response = await this.$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>

配置路由

在Vue路由配置文件中，将登录页面添加到路由列表。确保未登录用户只能访问登录页面。

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

Vue.use(Router)

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

添加导航守卫

实现全局前置守卫，检查用户是否已认证。如果未认证且尝试访问受保护路由，重定向到登录页面。

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

集成HTTP客户端

安装并配置axios用于发送HTTP请求。在main.js中设置全局axios实例，并配置请求拦截器添加认证令牌。

import axios from 'axios'

Vue.prototype.$axios = axios.create({
  baseURL: 'http://your-api-url.com'
})

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

处理登录状态

创建Vuex store管理用户登录状态。定义actions处理登录和注销操作，mutations更新状态。

const store = new Vuex.Store({
  state: {
    isAuthenticated: false,
    user: null
  },
  mutations: {
    SET_AUTH(state, payload) {
      state.isAuthenticated = payload
    },
    SET_USER(state, payload) {
      state.user = payload
    }
  },
  actions: {
    login({ commit }, userData) {
      return axios.post('/api/login', userData)
        .then(response => {
          commit('SET_AUTH', true)
          commit('SET_USER', response.data.user)
          localStorage.setItem('token', response.data.token)
        })
    },
    logout({ commit }) {
      commit('SET_AUTH', false)
      commit('SET_USER', null)
      localStorage.removeItem('token')
    }
  }
})

样式设计

为登录页面添加CSS样式，确保良好的用户体验。可以使用预处理器如SCSS或LESS。

<style scoped>
.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 8px;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
}
</style>