Vue登录功能实现全套详解(含封装axios)

关于“Vue登录功能实现全套详解(含封装axios)”的完整攻略，我将为你进行详细讲解。

1. 概述

本文将从以下方面讲解Vue登录功能的实现：

1. Vue项目的创建和初始化；
2. Vue路由的配置；
3. Vue组件的编写；
4. 使用axios封装HTTP请求；
5. 进行登录验证。

2. Vue项目的创建和初始化

首先，我们需要使用Vue-CLI创建一个Vue项目，并且初始化项目：

# 使用Vue-CLI创建一个基于Webpack的新项目
vue create my-project

# 进入项目目录
cd my-project

# 安装依赖
npm install

3. Vue路由的配置

在Vue项目中，我们需要使用Vue Router进行路由管理。在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)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    }
  ]
})

4. Vue组件的编写

在src/components目录下创建Login.vue和Home.vue组件：

Login.vue

<template>
  <div>
    <h1>Login</h1>
    <form @submit.prevent="handleSubmit">
      <div>
        <label>Username:</label>
        <input v-model="username" type="text">
      </div>
      <div>
        <label>Password:</label>
        <input v-model="password" type="password">
      </div>
      <button type="submit">Login</button>
    </form>
  </div>
</template>

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

<style>
/* 样式 */
</style>

Home.vue

<template>
  <div>
    <h1>Home</h1>
    <p>Welcome {{ username }}!</p>
    <button @click="handleLogout">Logout</button>
  </div>
</template>

<script>
export default {
  computed: {
    username () {
      return this.$store.getters.username
    }
  },
  methods: {
    handleLogout () {
      // 处理登出逻辑
    }
  }
}
</script>

<style>
/* 样式 */
</style>

5. 使用axios封装HTTP请求

在src目录下创建api目录，在api目录下创建一个http.js文件，使用axios封装HTTP请求：

import axios from 'axios'

const http = axios.create({
  baseURL: 'https://example.com/api'
})

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

export default http

6. 进行登录验证

在Login.vue组件的handleSubmit方法中，我们需要进行登录验证，并在验证成功后跳转到Home页面：

handleSubmit () {
  this.$http.post('/login', {
    username: this.username,
    password: this.password
  }).then(response => {
    const token = response.data.token
    localStorage.setItem('token', token)
    this.$store.commit('setToken', token)
    this.$store.commit('setUsername', this.username)
    this.$router.push('/home')
  }).catch(error => {
    console.error(error)
  })
}

在Home.vue组件的handleLogout方法中，我们需要进行登出操作，并跳转到Login页面：

handleLogout () {
  localStorage.removeItem('token')
  this.$store.commit('setToken', null)
  this.$store.commit('setUsername', null)
  this.$router.push('/')
}

以上是关于“Vue登录功能实现全套详解(含封装axios)”的完整攻略，希望本文对你有所帮助。