vue 实现登录跳转

实现登录跳转的基本逻辑

在Vue中实现登录跳转通常需要结合路由守卫（Navigation Guards）和状态管理（如Vuex或Pinia）。核心流程是验证用户登录状态，未登录时重定向到登录页，登录成功后跳转到目标页。

安装并配置路由

确保项目已安装Vue Router。定义路由时，为需要权限的页面添加元信息（meta字段）标记：

// router/index.js
const routes = [
  {
    path: '/login',
    component: () => import('@/views/Login.vue')
  },
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { requiresAuth: true } // 需要登录才能访问
  }
]

添加全局前置守卫

在路由配置中添加beforeEach守卫，检查目标路由是否需要认证：

// router/index.js
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token') // 或从Vuex/Pinia获取
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next({ path: '/login', query: { redirect: to.fullPath } }) // 保存目标路径
  } else {
    next()
  }
})

实现登录表单提交

在登录组件中，处理表单提交并存储认证信息：

// views/Login.vue
methods: {
  async handleSubmit() {
    try {
      const res = await api.login(this.formData)
      localStorage.setItem('token', res.data.token)

      // 跳转到原目标页或默认页
      const redirect = this.$route.query.redirect || '/dashboard'
      this.$router.push(redirect)
    } catch (error) {
      console.error('登录失败', error)
    }
  }
}

状态管理集成（可选）

对于复杂应用，建议使用Vuex或Pinia集中管理登录状态：

// store/auth.js (Pinia示例)
export const useAuthStore = defineStore('auth', {
  state: () => ({
    token: null
  }),
  actions: {
    setToken(token) {
      this.token = token
      localStorage.setItem('token', token)
    },
    logout() {
      this.token = null
      localStorage.removeItem('token')
    }
  }
})

退出登录处理

实现退出功能时需清除认证信息并重定向：

methods: {
  logout() {
    this.$store.dispatch('auth/logout') // Vuex示例
    this.$router.push('/login')
  }
}

动态路由权限（进阶）

如需根据角色动态生成路由，可在登录后请求权限接口并调用router.addRoutes()（Vue Router 3.x）或router.addRoute()（Vue Router 4.x）添加私有路由。

注意事项

• 敏感路由应同时在后端进行权限验证
• JWT等token需考虑过期时间和刷新机制
• 生产环境建议使用HttpOnly的Cookie存储敏感信息