vue实现登录检验
Vue 实现登录检验的方法
路由守卫验证登录状态
在 Vue 项目中，可以通过路由守卫（Navigation Guards）来实现登录验证。在 router/index.js 中设置全局前置守卫，检查用户是否已登录。
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token') // 假设使用 localStorage 存储 token
if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
next('/login')
} else {
next()
}
})在路由配置中为需要登录的页面添加 meta 字段：
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true }
}使用 Vuex 管理登录状态
通过 Vuex 集中管理用户登录状态，可以更方便地在组件中访问和修改登录状态。
// store/index.js
export default new Vuex.Store({
state: {
isLoggedIn: false,
user: null
},
mutations: {
login(state, user) {
state.isLoggedIn = true
state.user = user
},
logout(state) {
state.isLoggedIn = false
state.user = null
}
}
})拦截 HTTP 请求添加认证信息
使用 axios 拦截器为每个请求自动添加认证 token：
// utils/http.js
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
}, error => {
return Promise.reject(error)
})处理 token 过期
在响应拦截器中检查 token 是否过期，如果过期则跳转到登录页面：
axios.interceptors.response.use(response => {
return response
}, error => {
if (error.response.status === 401) {
store.commit('logout')
router.push('/login')
}
return Promise.reject(error)
})登录组件实现
在登录组件中处理用户登录逻辑：
methods: {
async handleLogin() {
try {
const response = await login(this.loginForm)
localStorage.setItem('token', response.data.token)
this.$store.commit('login', response.data.user)
this.$router.push('/dashboard')
} catch (error) {
console.error('Login failed:', error)
}
}
}退出登录实现
在需要退出登录的地方调用 logout 方法：
methods: {
logout() {
localStorage.removeItem('token')
this.$store.commit('logout')
this.$router.push('/login')
}
}组合式 API 实现
如果使用 Vue 3 的组合式 API，可以封装一个 useAuth 组合函数：
// composables/useAuth.js
import { computed } from 'vue'
import { useStore } from 'vuex'
export function useAuth() {
const store = useStore()
const isLoggedIn = computed(() => store.state.isLoggedIn)
const login = (user) => {
store.commit('login', user)
}
const logout = () => {
store.commit('logout')
}
return { isLoggedIn, login, logout }
}这些方法可以组合使用，根据项目需求选择合适的实现方式。路由守卫适合页面级别的访问控制，Vuex 适合全局状态管理，axios 拦截器适合 API 请求的认证处理。
