vue项目实现注册登录
Vue 项目实现注册登录功能
项目初始化与依赖安装
创建 Vue 项目并安装必要依赖（如 Vue Router、Axios、Vuex 等）：
vue create auth-demo
cd auth-demo
npm install vue-router axios vuex路由配置
在 src/router/index.js 中配置路由：
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
import Register from '../views/Register.vue'
import Dashboard from '../views/Dashboard.vue'
const routes = [
{ path: '/login', component: Login },
{ path: '/register', component: Register },
{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
]
const router = createRouter({
history: createWebHistory(),
routes
})状态管理（Vuex）
在 src/store/index.js 中设置用户状态：
import { createStore } from 'vuex'
export default createStore({
state: {
user: null,
token: localStorage.getItem('token') || null
},
mutations: {
SET_USER(state, user) {
state.user = user
},
SET_TOKEN(state, token) {
state.token = token
localStorage.setItem('token', token)
},
CLEAR_AUTH(state) {
state.user = null
state.token = null
localStorage.removeItem('token')
}
}
})注册组件实现
src/views/Register.vue 示例：
<template>
<form @submit.prevent="handleRegister">
<input v-model="form.email" type="email" placeholder="Email">
<input v-model="form.password" type="password" placeholder="Password">
<button type="submit">Register</button>
</form>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
form: {
email: '',
password: ''
}
}
},
methods: {
async handleRegister() {
try {
const response = await axios.post('/api/register', this.form)
this.$store.commit('SET_TOKEN', response.data.token)
this.$router.push('/dashboard')
} catch (error) {
console.error(error)
}
}
}
}
</script>登录组件实现
src/views/Login.vue 示例：
<template>
<form @submit.prevent="handleLogin">
<input v-model="form.email" type="email" placeholder="Email">
<input v-model="form.password" type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
form: {
email: '',
password: ''
}
}
},
methods: {
async handleLogin() {
try {
const response = await axios.post('/api/login', this.form)
this.$store.commit('SET_TOKEN', response.data.token)
this.$router.push('/dashboard')
} catch (error) {
console.error(error)
}
}
}
}
</script>路由守卫
在 src/router/index.js 中添加导航守卫：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !store.state.token) {
next('/login')
} else {
next()
}
})API 请求封装
创建 src/api/auth.js 封装请求：
import axios from 'axios'
export default {
register(credentials) {
return axios.post('/api/register', credentials)
},
login(credentials) {
return axios.post('/api/login', credentials)
}
}响应拦截处理
在 src/main.js 中设置响应拦截：
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
store.commit('CLEAR_AUTH')
router.push('/login')
}
return Promise.reject(error)
}
)用户信息获取
在 Dashboard 组件中展示用户信息：
<template>
<div>
<h1>Welcome, {{ user.name }}</h1>
<button @click="logout">Logout</button>
</div>
</template>
<script>
export default {
computed: {
user() {
return this.$store.state.user
}
},
methods: {
logout() {
this.$store.commit('CLEAR_AUTH')
this.$router.push('/login')
}
}
}
</script>后端接口说明
示例 Node.js 后端接口（需单独实现）：
// Express 示例
app.post('/api/register', (req, res) => {
// 实现用户注册逻辑
res.json({ token: 'generated-jwt-token' })
})
app.post('/api/login', (req, res) => {
// 实现用户登录验证
res.json({ token: 'generated-jwt-token' })
})表单验证增强
建议使用 Vuelidate 或 VeeValidate 进行表单验证：
npm install @vuelidate/core @vuelidate/validators安全注意事项
- 使用 HTTPS 协议
- 密码需加密存储（如 bcrypt）
- 实现 CSRF 防护
- 设置合理的 Token 过期时间
- 敏感操作需要二次验证
样式优化建议
- 添加加载状态指示器
- 实现表单错误提示
- 使用过渡动画增强用户体验
- 响应式布局适配移动设备
