vue路由登录实现

路由登录实现的基本思路

在Vue项目中实现路由登录功能通常需要结合Vue Router和状态管理工具（如Vuex或Pinia）。核心逻辑是通过路由守卫（Navigation Guards）控制页面访问权限，未登录用户尝试访问受保护路由时重定向到登录页。

安装必要依赖

确保项目已安装vue-router。如果使用状态管理，需安装vuex或pinia：

npm install vue-router
npm install vuex  # 或 pinia

路由配置

在router/index.js中配置路由，标记需要认证的路由：

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
    meta: { requiresAuth: true }  // 需要认证的标记
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

实现路由守卫

添加全局前置守卫检查用户认证状态：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')  // 从localStorage或store获取

  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')  // 重定向到登录页
  } else {
    next()  // 放行
  }
})

登录逻辑实现

在登录组件中处理认证成功后跳转：

// Login.vue
methods: {
  handleLogin() {
    api.login(this.credentials).then(res => {
      localStorage.setItem('token', res.data.token)  // 存储token
      this.$router.push('/')  // 跳转到首页
    })
  }
}

动态路由（可选）

对于角色权限系统，可动态添加路由：

// 登录成功后动态添加路由
api.getUserRoutes().then(routes => {
  routes.forEach(route => {
    router.addRoute(route)
  })
})

退出登录处理

清除认证信息并重定向：

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

使用状态管理（Vuex示例）

store/auth.js中维护登录状态：

export default {
  state: () => ({
    user: null,
    token: null
  }),
  mutations: {
    SET_USER(state, payload) {
      state.user = payload
    },
    SET_TOKEN(state, payload) {
      state.token = payload
    }
  }
}

路由守卫改为检查store中的状态：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.state.auth.token) {
    next('/login')
  } else {
    next()
  }
})