vue实现登录路由

Vue 登录路由实现方法

路由配置

在 router/index.js 中配置登录路由和需要权限的路由。使用 meta 字段标记需要认证的路由。

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
import Dashboard from '@/views/Dashboard.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: Dashboard,
      meta: { requiresAuth: true }
    }
  ]
})

路由守卫

添加全局前置守卫检查路由是否需要认证。未登录用户访问受保护路由时重定向到登录页。

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

  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      next({ name: 'Login' })
    } else {
      next()
    }
  } else {
    next()
  }
})

登录逻辑

在登录组件中处理登录成功后的路由跳转。通常需要存储认证令牌并跳转到目标页面。

methods: {
  handleLogin() {
    // 假设这是登录API调用
    loginApi(this.username, this.password).then(response => {
      localStorage.setItem('token', response.data.token)
      this.$router.push({ name: 'Dashboard' })
    }).catch(error => {
      console.error('Login failed', error)
    })
  }
}

注销处理

实现注销功能时需要清除认证信息并重定向到登录页。

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

动态路由

对于更复杂的权限系统，可以实现动态路由加载。根据用户权限动态添加路由。

// 在登录成功后
const userRoutes = generateRoutesBasedOnRole(user.role)
router.addRoutes(userRoutes)

注意事项

• 认证令牌应使用安全的方式存储
• 敏感路由应在后端进行二次验证
• 考虑实现路由懒加载优化性能
• 对于SSR应用需要调整实现方式