vue实现登录判断
Vue 实现登录判断
在 Vue 中实现登录判断通常涉及以下几个关键步骤：
使用 Vue Router 进行路由守卫
通过 Vue Router 的导航守卫（beforeEach）可以拦截路由跳转，检查用户是否已登录。若未登录，则重定向到登录页面。
// router/index.js
import router from './router'
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token') // 检查本地存储的 token
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login') // 跳转到登录页
} else {
next() // 放行
}
})登录状态管理
推荐使用 Vuex 集中管理登录状态，避免分散的逻辑判断。
// store/index.js
const store = new Vuex.Store({
state: {
isLoggedIn: false,
user: null
},
mutations: {
login(state, userData) {
state.isLoggedIn = true
state.user = userData
localStorage.setItem('token', userData.token) // 存储 token
},
logout(state) {
state.isLoggedIn = false
state.user = null
localStorage.removeItem('token') // 清除 token
}
}
})登录逻辑实现
在登录组件中调用 Vuex 的登录方法，并处理接口返回的认证信息。
// Login.vue
methods: {
async handleLogin() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
})
this.$store.commit('login', response.data) // 提交到 Vuex
this.$router.push('/dashboard') // 跳转到主页
} catch (error) {
console.error('登录失败:', error)
}
}
}全局状态检查
在根组件（如 App.vue）的 created 钩子中检查初始登录状态，避免页面刷新后状态丢失。
// App.vue
created() {
const token = localStorage.getItem('token')
if (token) {
this.$store.commit('login', { token }) // 恢复登录状态
}
}动态显示登录相关 UI
根据登录状态动态显示导航栏内容，例如显示“登录”或“用户信息”。
<template>
<div v-if="$store.state.isLoggedIn">
<span>欢迎, {{ $store.state.user.name }}</span>
<button @click="logout">退出</button>
</div>
<div v-else>
<router-link to="/login">登录</router-link>
</div>
</template>接口请求拦截
在 Axios 拦截器中自动添加认证 Token，并在 Token 失效时跳转登录页。
// utils/axios.js
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
})
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
store.commit('logout')
router.push('/login')
}
return Promise.reject(error)
}
)
