前端登录功能实现vue
前端登录功能实现（Vue）
环境准备
确保已安装Vue CLI或Vite作为项目脚手架工具，安装依赖包如vue-router和axios：
npm install vue-router axios路由配置
在router/index.js中配置登录路由，启用路由守卫控制访问权限：
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
const routes = [
{
path: '/login',
name: 'Login',
component: Login,
meta: { requiresAuth: false }
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})登录组件
创建Login.vue组件，包含表单验证和提交逻辑：
<template>
<form @submit.prevent="handleSubmit">
<input v-model="form.username" type="text" placeholder="用户名" required>
<input v-model="form.password" type="password" placeholder="密码" required>
<button type="submit">登录</button>
</form>
</template>
<script>
import { reactive } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
export default {
setup() {
const form = reactive({
username: '',
password: ''
})
const router = useRouter()
const handleSubmit = async () => {
try {
const res = await axios.post('/api/login', form)
localStorage.setItem('token', res.data.token)
router.push('/dashboard')
} catch (error) {
alert('登录失败: ' + error.response.data.message)
}
}
return { form, handleSubmit }
}
}
</script>状态管理（可选）
对于复杂应用，建议使用Pinia管理登录状态：
// stores/auth.js
import { defineStore } from 'pinia'
export const useAuthStore = defineStore('auth', {
state: () => ({
user: null,
token: localStorage.getItem('token') || null
}),
actions: {
async login(credentials) {
const res = await axios.post('/api/login', credentials)
this.token = res.data.token
localStorage.setItem('token', this.token)
},
logout() {
this.token = null
localStorage.removeItem('token')
}
}
})安全增强
实现以下安全措施：
- 使用HTTPS传输
- 添加CSRF Token防护
- 设置HTTP-only的Cookie存储token
- 密码字段进行前端加密处理（如bcryptjs）
错误处理
完善异常捕获机制，包括网络错误、服务器返回错误等：
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
router.push('/login')
}
return Promise.reject(error)
}
)
