vue带token实现登录
使用 Vue 实现 Token 登录
在 Vue 中实现 Token 登录通常涉及前端与后端的交互，包括发送登录请求、存储 Token、并在后续请求中携带 Token。以下是具体实现步骤：
发送登录请求并获取 Token
通过 axios 或其他 HTTP 客户端发送登录请求，将用户名和密码传递给后端 API。成功后，后端会返回一个 Token。
import axios from 'axios';
const login = async (username, password) => {
try {
const response = await axios.post('/api/login', {
username,
password
});
const token = response.data.token;
localStorage.setItem('authToken', token); // 存储 Token
return token;
} catch (error) {
console.error('登录失败:', error);
throw error;
}
};存储 Token
将 Token 存储在 localStorage 或 sessionStorage 中，确保后续请求可以携带 Token。
localStorage.setItem('authToken', token); // 存储 Token在请求头中携带 Token
通过 axios 的请求拦截器，在每次请求的头部自动添加 Token。
axios.interceptors.request.use(config => {
const token = localStorage.getItem('authToken');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, error => {
return Promise.reject(error);
});检查登录状态
通过检查 localStorage 中是否存在 Token 来判断用户是否已登录。
const isAuthenticated = () => {
return !!localStorage.getItem('authToken');
};登出功能
清除 localStorage 中的 Token 并跳转到登录页面。
const logout = () => {
localStorage.removeItem('authToken');
window.location.href = '/login'; // 跳转到登录页
};路由守卫保护页面
使用 Vue Router 的导航守卫保护需要登录才能访问的页面。
import router from './router';
router.beforeEach((to, from, next) => {
const isAuthRequired = to.matched.some(record => record.meta.requiresAuth);
const isAuthenticated = localStorage.getItem('authToken');
if (isAuthRequired && !isAuthenticated) {
next('/login');
} else {
next();
}
});后端验证 Token
后端需要在每次请求时验证 Token 的有效性。如果 Token 无效，返回 401 状态码，前端可以跳转到登录页面。
axios.interceptors.response.use(response => {
return response;
}, error => {
if (error.response.status === 401) {
localStorage.removeItem('authToken');
window.location.href = '/login';
}
return Promise.reject(error);
});通过以上步骤，可以实现 Vue 中的 Token 登录功能，包括登录、存储 Token、携带 Token 请求、登出以及路由保护。
