vue路由实现登录

路由守卫实现登录验证

在Vue项目中，可以通过路由守卫（Navigation Guards）来实现登录验证逻辑。路由守卫能在路由跳转前、跳转后或跳转时进行拦截处理。

安装路由依赖

npm install vue-router

基本路由配置 在router/index.js中配置需要权限的路由：

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', component: Login },
    { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
  ]
})

全局前置守卫

使用router.beforeEach实现全局登录验证：

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

  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

登录状态管理

结合Vuex可以更好地管理登录状态：

store/auth.js

export default {
  state: {
    user: null,
    token: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    },
    setToken(state, token) {
      state.token = token
      localStorage.setItem('token', token)
    },
    logout(state) {
      state.user = null
      state.token = null
      localStorage.removeItem('token')
    }
  }
}

登录组件实现

Login.vue示例

<template>
  <div>
    <form @submit.prevent="login">
      <input v-model="username" placeholder="Username">
      <input v-model="password" type="password" placeholder="Password">
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async login() {
      try {
        const response = await api.login(this.username, this.password)
        this.$store.commit('setToken', response.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        console.error('Login failed', error)
      }
    }
  }
}
</script>

动态路由加载

对于权限复杂的系统，可以动态加载路由：

function loadRoutes() {
  const userRole = store.getters.userRole
  const routes = []

  if (userRole === 'admin') {
    routes.push({
      path: '/admin',
      component: () => import('@/views/Admin.vue')
    })
  }

  router.addRoutes(routes)
}

路由元信息控制

通过路由的meta字段可以更灵活地控制权限：

{
  path: '/admin',
  component: Admin,
  meta: {
    requiresAuth: true,
    requiredRoles: ['admin']
  }
}

然后在全局守卫中检查：

router.beforeEach((to, from, next) => {
  const userRole = store.getters.userRole

  if (to.matched.some(record => record.meta.requiredRoles)) {
    if (!record.meta.requiredRoles.includes(userRole)) {
      next('/unauthorized')
      return
    }
  }

  next()
})

退出登录处理

实现退出功能时需要清除状态并重定向：

methods: {
  logout() {
    this.$store.commit('logout')
    this.$router.push('/login')
  }
}