vue实现登录状态

Vue 实现登录状态管理

使用 Vuex 进行状态管理

Vuex 是 Vue 的官方状态管理库，适合管理全局的登录状态。在 Vuex 中定义一个 user 模块，存储用户信息和登录状态。

// store/modules/user.js
const state = {
  isLoggedIn: false,
  user: null
}

const mutations = {
  SET_LOGIN(state, user) {
    state.isLoggedIn = true
    state.user = user
  },
  SET_LOGOUT(state) {
    state.isLoggedIn = false
    state.user = null
  }
}

const actions = {
  login({ commit }, userData) {
    // 调用登录 API
    return api.login(userData).then(response => {
      commit('SET_LOGIN', response.data.user)
      localStorage.setItem('token', response.data.token)
    })
  },
  logout({ commit }) {
    commit('SET_LOGOUT')
    localStorage.removeItem('token')
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

路由守卫控制访问权限

在 Vue Router 中配置全局前置守卫，检查用户登录状态，未登录用户跳转到登录页。

// router/index.js
router.beforeEach((to, from, next) => {
  const isAuthenticated = store.state.user.isLoggedIn
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

持久化登录状态

使用 localStorage 或 sessionStorage 存储 token，页面刷新时从存储中恢复登录状态。

// main.js 或 App.vue
const token = localStorage.getItem('token')
if (token) {
  api.validateToken(token).then(response => {
    store.commit('user/SET_LOGIN', response.data.user)
  }).catch(() => {
    localStorage.removeItem('token')
  })
}

使用计算属性获取登录状态

在组件中通过计算属性获取登录状态，方便模板中使用。

computed: {
  isLoggedIn() {
    return this.$store.state.user.isLoggedIn
  },
  currentUser() {
    return this.$store.state.user.user
  }
}

封装登录状态检查工具函数

创建可复用的工具函数检查登录状态，减少代码重复。

// utils/auth.js
export function checkAuth() {
  return store.state.user.isLoggedIn
}

export function requireAuth(to, from, next) {
  if (!checkAuth()) {
    next('/login')
  } else {
    next()
  }
}