vue如何实现登录拦截
实现登录拦截的方法
在Vue中实现登录拦截通常通过路由守卫（Navigation Guards）完成，结合全局前置守卫和本地存储（如localStorage）来验证用户登录状态。
使用路由守卫进行拦截
在Vue Router中，可以通过beforeEach方法设置全局前置守卫，检查用户是否已登录。如果未登录，则跳转到登录页面。
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
import Home from '@/views/Home.vue'
Vue.use(Router)
const router = new Router({
routes: [
{ path: '/login', component: Login },
{ path: '/home', component: Home, meta: { requiresAuth: true } }
]
})
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
next('/login')
} else {
next()
}
})
export default router结合本地存储验证登录状态
用户登录成功后，将token或其他认证信息存储在本地（如localStorage），后续请求时通过该信息判断登录状态。
// 登录成功后存储token
localStorage.setItem('token', 'your-auth-token')处理HTTP请求拦截
在axios等HTTP请求库中设置请求拦截器，确保每次请求都携带认证信息（如token）。
// utils/axios.js
import axios from 'axios'
const instance = axios.create({
baseURL: 'https://api.example.com'
})
instance.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
}, error => {
return Promise.reject(error)
})
export default instance处理未登录的API响应
通过响应拦截器检查API返回的状态码，若发现未授权（如401），则清除本地存储并跳转到登录页。
instance.interceptors.response.use(response => {
return response
}, error => {
if (error.response.status === 401) {
localStorage.removeItem('token')
router.push('/login')
}
return Promise.reject(error)
})动态路由与权限控制
对于需要更细粒度权限控制的场景，可以通过动态路由和角色验证实现。登录后根据用户角色加载对应的路由配置。
// 根据用户角色动态加载路由
function loadRoutesBasedOnRole(role) {
const routes = []
if (role === 'admin') {
routes.push({ path: '/admin', component: AdminPanel })
}
router.addRoutes(routes)
}通过以上方法，可以实现在Vue应用中对未登录用户的拦截和权限控制。
