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>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      // 模拟登录成功
      localStorage.setItem('isAuthenticated', 'true')
      this.$router.push('/home')
    }
  }
}
</script>

配置路由

在router/index.js中设置路由，为需要保护的路由添加元字段：

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

Vue.use(Router)

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

实现路由守卫

在router/index.js中添加全局前置守卫：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('isAuthenticated')

  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

创建主页组件

新建Home.vue作为受保护的主页：

<template>
  <div class="home-container">
    <h1>欢迎来到主页</h1>
    <button @click="handleLogout">退出登录</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleLogout() {
      localStorage.removeItem('isAuthenticated')
      this.$router.push('/login')
    }
  }
}
</script>

状态管理（可选）

对于更复杂的应用，可以使用Vuex管理登录状态：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isAuthenticated: false
  },
  mutations: {
    login(state) {
      state.isAuthenticated = true
    },
    logout(state) {
      state.isAuthenticated = false
    }
  }
})

样式设计

为登录页面添加基本样式：

.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.login-container input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 8px;
}

.login-container button {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

真实API集成

实际项目中应替换模拟登录为真实API调用：

methods: {
  async handleLogin() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
      localStorage.setItem('token', response.data.token)
      this.$store.commit('login')
      this.$router.push('/home')
    } catch (error) {
      console.error('登录失败:', error)
    }
  }
}