vue路由登录实现

路由守卫实现登录验证

在Vue项目中，可以通过路由守卫（navigation guards）实现登录验证逻辑。全局前置守卫router.beforeEach是最常用的方式，在路由跳转前进行拦截。

// router/index.js
import router from './router'
import { getToken } from '@/utils/auth'

router.beforeEach((to, from, next) => {
  const hasToken = getToken()

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

路由配置添加元信息

在路由定义中通过meta字段标记需要认证的路由：

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true }
  },
  {
    path: '/login',
    component: Login
  }
]

登录成功处理

登录成功后需要存储token并跳转到目标页面：

// Login.vue
methods: {
  handleLogin() {
    login(this.loginForm).then(res => {
      setToken(res.data.token)
      this.$router.push(this.$route.query.redirect || '/')
    })
  }
}

持久化token存储

使用localStorage或cookie存储token，并封装工具方法：

// utils/auth.js
export function getToken() {
  return localStorage.getItem('token')
}

export function setToken(token) {
  localStorage.setItem('token', token)
}

export function removeToken() {
  localStorage.removeItem('token')
}

请求拦截器配置

在axios请求拦截器中添加token：

// utils/request.js
import { getToken } from './auth'

service.interceptors.request.use(
  config => {
    if (getToken()) {
      config.headers['Authorization'] = 'Bearer ' + getToken()
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

响应拦截器处理token过期

在axios响应拦截器中处理401未授权情况：

service.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      removeToken()
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

退出登录实现

清除token并重定向到登录页：

// UserDropdown.vue
methods: {
  handleLogout() {
    logout().then(() => {
      removeToken()
      this.$router.push('/login')
    })
  }
}