vue通用登录功能实现
实现Vue通用登录功能
安装必要依赖
确保项目中已安装axios用于HTTP请求，vue-router用于路由跳转，vuex（可选）用于状态管理：
npm install axios vue-router vuex创建登录组件
在src/components下创建Login.vue文件，包含表单和基础验证：
<template>
<form @submit.prevent="handleSubmit">
<input v-model="form.username" placeholder="用户名"/>
<input v-model="form.password" type="password" placeholder="密码"/>
<button type="submit">登录</button>
</form>
</template>
<script>
export default {
data() {
return {
form: { username: '', password: '' }
}
},
methods: {
async handleSubmit() {
try {
const res = await axios.post('/api/login', this.form)
localStorage.setItem('token', res.data.token)
this.$router.push('/dashboard')
} catch (error) {
alert('登录失败')
}
}
}
}
</script>配置路由拦截
在src/router/index.js中设置路由守卫，实现未登录跳转：
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
Vue.use(Router)
const router = new Router({
routes: [
{ path: '/login', component: Login },
{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
]
})
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})封装API请求
在src/utils/request.js中配置axios拦截器，自动附加Token：
import axios from 'axios'
const instance = axios.create({
baseURL: process.env.VUE_APP_API_URL
})
instance.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) config.headers.Authorization = `Bearer ${token}`
return config
})
export default instance状态管理（可选）
在src/store/index.js中使用Vuex管理登录状态：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
user: null,
isAuthenticated: !!localStorage.getItem('token')
},
mutations: {
SET_USER(state, user) {
state.user = user
state.isAuthenticated = true
},
LOGOUT(state) {
state.user = null
state.isAuthenticated = false
}
}
})响应拦截处理
在src/utils/request.js中添加响应拦截，处理401未授权：
instance.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
store.commit('LOGOUT')
router.push('/login')
}
return Promise.reject(error)
}
)环境变量配置
在项目根目录创建.env文件配置API基础地址：
VUE_APP_API_URL=http://your-api-domain.com安全注意事项
- 使用HTTPS协议传输敏感数据
- 考虑实现CSRF保护机制
- 敏感操作需进行二次验证
- 定期清理本地存储的Token
- 服务端应设置Token过期时间
以上实现可根据具体项目需求进行调整，如添加验证码功能、第三方登录集成等扩展功能。
