vue实现登录系统

实现登录系统的基本步骤

安装Vue.js及相关依赖
使用Vue CLI创建项目，安装vue-router和axios。vue-router用于页面路由管理，axios用于HTTP请求。

npm install vue-router axios

创建登录组件

在components文件夹下创建Login.vue文件，包含表单和提交逻辑。

<template>
  <div>
    <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: {
    async handleSubmit() {
      try {
        const response = await 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>

配置路由

在router/index.js中设置登录路由和受保护的路由。

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

Vue.use(Router)

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

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

export default router

处理认证状态

在main.js中配置axios全局拦截器，确保每次请求都携带token。

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);
});

后端接口对接

确保后端API接收用户名和密码，验证成功后返回token。

// 示例Node.js Express路由
app.post('/api/login', (req, res) => {
  const { username, password } = req.body;
  // 验证逻辑
  if (username === 'admin' && password === '123456') {
    res.json({ token: 'generated-jwt-token' });
  } else {
    res.status(401).json({ error: '认证失败' });
  }
});

添加注销功能

在需要注销的地方清除本地存储的token并重定向到登录页。

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

表单验证增强

使用Vuelidate等库增加表单验证功能。

npm install vuelidate

在组件中引入并使用验证规则。

<script>
import { required, minLength } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  validations: {
    username: { required },
    password: { required, minLength: minLength(6) }
  },
  methods: {
    handleSubmit() {
      this.$v.$touch();
      if (!this.$v.$invalid) {
        // 提交逻辑
      }
    }
  }
}
</script>

响应式处理

根据登录状态显示不同内容，使用Vuex管理全局状态。

npm install vuex

创建store管理用户认证状态。

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isAuthenticated: false
  },
  mutations: {
    setAuth(state, status) {
      state.isAuthenticated = status
    }
  }
})

在登录成功后更新状态。

methods: {
  async handleSubmit() {
    // ...登录逻辑
    this.$store.commit('setAuth', true);
  }
}