vue如何实现token登录
Vue 实现 Token 登录的方法
登录逻辑实现
在登录页面发送请求获取 token，通常使用 axios 或其他 HTTP 客户端。示例代码展示如何在 Vue 中处理登录请求：
// 登录方法示例
async handleLogin() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
})
const token = response.data.token
localStorage.setItem('token', token)
this.$router.push('/dashboard')
} catch (error) {
console.error('登录失败:', error)
}
}路由守卫配置
通过 Vue Router 的全局前置守卫保护需要认证的路由。未携带有效 token 时重定向到登录页：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})Axios 请求拦截
设置 axios 拦截器自动为每个请求添加 Authorization 头：
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
}, error => {
return Promise.reject(error)
})响应拦截处理
配置响应拦截器处理 token 过期情况：
axios.interceptors.response.use(response => {
return response
}, error => {
if (error.response.status === 401) {
localStorage.removeItem('token')
router.push('/login')
}
return Promise.reject(error)
})Token 刷新机制
实现静默刷新 token 的逻辑，避免频繁要求用户重新登录：
async refreshToken() {
try {
const refreshToken = localStorage.getItem('refreshToken')
const response = await axios.post('/api/refresh', { refreshToken })
localStorage.setItem('token', response.data.token)
return response.data.token
} catch (error) {
this.logout()
throw error
}
}用户状态管理
使用 Vuex 集中管理用户认证状态：
const store = new Vuex.Store({
state: {
token: localStorage.getItem('token') || null
},
mutations: {
setToken(state, token) {
state.token = token
localStorage.setItem('token', token)
},
clearToken(state) {
state.token = null
localStorage.removeItem('token')
}
}
})退出登录处理
实现安全的退出功能，清除所有认证信息：
methods: {
logout() {
this.$store.commit('clearToken')
this.$router.push('/login')
}
}以上方法组合使用可以构建完整的 Vue token 认证系统，注意根据实际业务需求调整实现细节。
