vue实现登录加token
Vue 实现登录加 Token
在 Vue 中实现登录功能并管理 Token，通常需要结合后端 API 和前端存储机制。以下是实现步骤：
安装 axios
使用 axios 发送 HTTP 请求到后端登录接口。
npm install axios创建登录组件
在 Vue 组件中实现登录表单和逻辑。
<template>
<div>
<form @submit.prevent="handleLogin">
<input v-model="username" placeholder="Username" />
<input v-model="password" type="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: '',
};
},
methods: {
async handleLogin() {
try {
const response = await axios.post('http://your-api-url/login', {
username: this.username,
password: this.password,
});
const token = response.data.token;
localStorage.setItem('token', token);
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
this.$router.push('/dashboard');
} catch (error) {
console.error('Login failed:', error);
}
},
},
};
</script>存储 Token
将 Token 存储在 localStorage 中，并设置 axios 的默认请求头。
localStorage.setItem('token', token);
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;路由守卫
使用 Vue Router 的路由守卫保护需要认证的路由。
import router from './router';
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token');
if (to.matched.some(record => record.meta.requiresAuth) && !token) {
next('/login');
} else {
next();
}
});注销功能
实现注销功能，清除 Token 并重定向到登录页面。
methods: {
logout() {
localStorage.removeItem('token');
delete axios.defaults.headers.common['Authorization'];
this.$router.push('/login');
},
}错误处理
在 axios 拦截器中统一处理 Token 过期或无效的情况。
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
localStorage.removeItem('token');
router.push('/login');
}
return Promise.reject(error);
}
);后端 API 示例
假设后端返回的登录接口响应如下：
{
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}注意事项
- 使用 HTTPS 确保 Token 传输安全。
- 考虑使用 Vuex 管理 Token 状态。
- 定期刷新 Token 以提高安全性。
- 避免在客户端存储敏感信息。
