vue实现jwt登录
实现JWT登录的Vue方案
安装依赖
确保项目已安装axios和jwt-decode，用于HTTP请求和JWT解码：
npm install axios jwt-decode配置Axios实例
创建src/utils/request.js文件，配置全局请求拦截器：
import axios from 'axios'
import router from '../router'
const service = axios.create({
baseURL: process.env.VUE_APP_API_URL,
timeout: 5000
})
service.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers['Authorization'] = `Bearer ${token}`
}
return config
})
service.interceptors.response.use(
response => response.data,
error => {
if (error.response.status === 401) {
router.push('/login')
}
return Promise.reject(error)
}
)
export default service登录逻辑实现
在登录组件中处理认证流程：
import request from '@/utils/request'
import jwt_decode from 'jwt-decode'
export default {
methods: {
async handleLogin() {
try {
const res = await request.post('/auth/login', {
username: this.username,
password: this.password
})
localStorage.setItem('token', res.token)
const decoded = jwt_decode(res.token)
this.$store.commit('setUser', decoded)
this.$router.push('/dashboard')
} catch (error) {
console.error('Login failed:', error)
}
}
}
}路由守卫配置
在src/router/index.js中添加全局前置守卫：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
next('/login')
} else {
next()
}
})状态管理
Vuex存储用户信息（src/store/index.js）：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
user: null
},
mutations: {
setUser(state, user) {
state.user = user
},
clearUser(state) {
state.user = null
}
}
})令牌刷新机制
实现静默刷新逻辑：
function refreshToken() {
const refreshToken = localStorage.getItem('refresh_token')
return request.post('/auth/refresh', { refreshToken })
.then(res => {
localStorage.setItem('token', res.token)
return res.token
})
}安全注意事项
- 始终使用HTTPS传输令牌
- 避免在localStorage存储敏感信息
- 设置合理的令牌过期时间
- 实现服务端的令牌黑名单机制
- 前端应定期检查令牌有效期
注销处理
清除本地存储的令牌和状态：
logout() {
localStorage.removeItem('token')
this.$store.commit('clearUser')
this.$router.push('/login')
}
