vue 实现登录跳转
实现登录跳转的基本流程
在Vue中实现登录跳转通常涉及以下几个核心步骤：路由配置、登录表单处理、状态管理及导航守卫。以下是具体实现方法：
路由配置
在router/index.js中配置登录页和需要权限的页面路由。使用meta字段标记需要认证的路由：
const routes = [
{
path: '/login',
component: () => import('@/views/Login.vue')
},
{
path: '/dashboard',
component: () => import('@/views/Dashboard.vue'),
meta: { requiresAuth: true } // 标记需要登录
}
];登录表单处理
在登录组件（Login.vue）中，提交表单时调用认证接口，成功后保存令牌并跳转：
methods: {
async handleSubmit() {
try {
const response = await axios.post('/api/login', this.formData);
localStorage.setItem('token', response.data.token); // 存储令牌
this.$router.push('/dashboard'); // 跳转到目标页
} catch (error) {
console.error('登录失败:', error);
}
}
}导航守卫
在路由配置中添加全局前置守卫，检查用户是否已登录：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token');
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login'); // 重定向到登录页
} else {
next(); // 放行
}
});状态管理（可选）
使用Vuex集中管理登录状态，避免依赖localStorage：
// store/index.js
state: {
token: null
},
mutations: {
setToken(state, token) {
state.token = token;
}
}登录成功后通过this.$store.commit('setToken', response.data.token)更新状态。
退出登录
清除存储的令牌或状态，并跳转到登录页：
methods: {
logout() {
localStorage.removeItem('token'); // 或 this.$store.commit('setToken', null)
this.$router.push('/login');
}
}注意事项
- 令牌安全：避免将敏感信息直接存储在
localStorage中，考虑使用HttpOnly的Cookie。 - 路由懒加载：通过动态导入（
() => import()）优化性能。 - 响应拦截：在Axios拦截器中处理令牌过期或无效的情况，自动跳转登录页。
