vue实现登录路由拦截

路由拦截实现原理

在Vue应用中实现登录路由拦截主要通过Vue Router的导航守卫功能。导航守卫允许在路由跳转前、跳转后或跳转过程中执行特定逻辑，常用于权限控制和登录验证。

创建路由实例

首先需要配置Vue Router实例，定义需要拦截的路由：

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方法设置全局前置守卫，在每次路由跳转前进行验证：

router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuth() // 自定义的认证检查方法
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)

  if (requiresAuth && !isAuthenticated) {
    next('/login')
  } else if (to.path === '/login' && isAuthenticated) {
    next('/dashboard')
  } else {
    next()
  }
})

认证状态管理

通常需要结合Vuex或本地存储管理登录状态：

function checkAuth() {
  return localStorage.getItem('token') !== null
  // 或使用Vuex状态
  // return store.state.user.isAuthenticated
}

登录逻辑实现

在登录组件中处理认证成功后的操作：

methods: {
  handleLogin() {
    loginAPI(this.form).then(res => {
      localStorage.setItem('token', res.data.token)
      this.$router.push('/dashboard')
    })
  }
}

路由元信息配置

通过路由的meta字段标记需要认证的路由：

{
  path: '/profile',
  component: Profile,
  meta: { requiresAuth: true }
}

404页面处理

建议添加404路由处理未匹配路径：

{
  path: '*',
  component: NotFound
}

动态路由处理

对于动态加载的路由，可以在获取权限后添加：

if (user.isAdmin) {
  router.addRoute({
    path: '/admin',
    component: AdminPanel,
    meta: { requiresAuth: true }
  })
}

退出登录处理

清除认证信息并重定向：

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

以上方案实现了完整的登录路由拦截流程，可根据实际需求调整认证逻辑和路由配置。