vue 实现登录跳转
实现登录跳转的核心逻辑
在Vue中实现登录跳转通常涉及路由守卫、状态管理和API请求的配合。以下是典型实现方式：
路由配置与导航守卫
设置需要权限的路由元信息meta字段，标记哪些页面需要登录：
// router.js
const routes = [
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true }
},
{
path: '/login',
component: Login
}
]添加全局前置守卫进行跳转控制：
router.beforeEach((to, from, next) => {
const isAuthenticated = store.state.user.isAuthenticated
if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
next('/login')
} else {
next()
}
})登录表单提交处理
在登录组件中处理表单提交和跳转：
// Login.vue
methods: {
async handleSubmit() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
})
localStorage.setItem('token', response.data.token)
this.$store.commit('SET_AUTH', true)
const redirect = this.$route.query.redirect || '/'
this.$router.push(redirect)
} catch (error) {
console.error('Login failed:', error)
}
}
}状态管理集成
Vuex存储认证状态：
// store.js
export default new Vuex.Store({
state: {
user: {
isAuthenticated: false
}
},
mutations: {
SET_AUTH(state, status) {
state.user.isAuthenticated = status
}
}
})令牌持久化处理
在应用初始化时恢复登录状态：
// main.js
const token = localStorage.getItem('token')
if (token) {
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
store.commit('SET_AUTH', true)
}退出登录实现
清除状态并跳转回登录页：
// UserProfile.vue
methods: {
logout() {
localStorage.removeItem('token')
this.$store.commit('SET_AUTH', false)
this.$router.push('/login')
}
}动态路由加载（可选）
对于更复杂的权限系统，可以结合动态路由：
// 根据角色动态添加路由
router.addRoute({
path: '/admin',
component: AdminPanel,
meta: { requiresAuth: true, role: 'admin' }
})每个实现环节都应考虑错误处理、加载状态和用户体验优化。实际项目中可能还需要结合JWT刷新机制、权限角色验证等扩展功能。
