vue路由跳转实现登录

Vue路由跳转实现登录功能

在Vue项目中，可以通过路由跳转和导航守卫实现登录功能。以下是具体实现方法：

配置路由文件

在router/index.js中定义登录路由和需要权限的路由：

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue')
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { requiresAuth: true }
  }
]

实现登录跳转逻辑

在登录组件Login.vue中处理登录逻辑：

methods: {
  handleLogin() {
    // 模拟登录API调用
    loginApi(this.form).then(res => {
      localStorage.setItem('token', res.data.token)
      this.$router.push({ path: this.$route.query.redirect || '/' })
    })
  }
}

添加路由守卫

在router/index.js中添加全局前置守卫：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')

  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

处理登出功能

在需要登出的组件中添加方法：

methods: {
  logout() {
    localStorage.removeItem('token')
    this.$router.push('/login')
  }
}

动态路由加载

对于更复杂的权限系统，可以结合动态路由：

// 登录成功后加载有权限的路由
login().then(res => {
  const accessRoutes = generateRoutes(res.roles)
  router.addRoutes(accessRoutes)
})

这种方法实现了完整的登录流程控制，包括路由跳转、权限验证和动态路由加载。根据项目实际需求可以调整验证逻辑和存储方式。