vue实现拦截登录
Vue 实现登录拦截的方法
使用路由守卫进行拦截
Vue Router 提供了全局前置守卫 beforeEach，可以在路由跳转前进行验证。在路由配置文件中添加以下代码：
import router from './router'
import { getToken } from './utils/auth'
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !getToken()) {
next('/login')
} else {
next()
}
})定义路由元信息
在路由配置中，为需要登录才能访问的页面添加 meta 字段：
const routes = [
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true }
},
{
path: '/login',
component: Login
}
]实现 Token 验证
创建一个 auth.js 工具文件，用于处理 Token 的存储和获取：
const TOKEN_KEY = 'vue_admin_token'
export function getToken() {
return localStorage.getItem(TOKEN_KEY)
}
export function setToken(token) {
localStorage.setItem(TOKEN_KEY, token)
}
export function removeToken() {
localStorage.removeItem(TOKEN_KEY)
}登录成功后设置 Token
在登录组件中，成功登录后调用 setToken 方法：
import { setToken } from '../utils/auth'
methods: {
handleLogin() {
login(this.loginForm).then(response => {
setToken(response.data.token)
this.$router.push('/dashboard')
})
}
}响应拦截器处理 Token 过期
在 axios 的响应拦截器中处理 Token 过期的情况：
import axios from 'axios'
import { removeToken } from './auth'
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
removeToken()
router.push('/login')
}
return Promise.reject(error)
}
)退出登录处理
在退出登录时清除 Token 并跳转到登录页：
import { removeToken } from '../utils/auth'
methods: {
logout() {
removeToken()
this.$router.push('/login')
}
}通过以上方法可以实现 Vue 应用的登录拦截功能，确保未登录用户无法访问受保护的路由。
