vue实现登录访问控制
Vue 实现登录访问控制的方法
路由守卫（Route Guards）
在 Vue Router 中配置全局前置守卫 beforeEach，检查用户是否登录。未登录用户访问受限路由时，重定向到登录页。
// router/index.js
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token') // 假设 token 存储在 localStorage
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})路由元信息（Route Meta Fields）
为需要登录的路由添加 meta 字段标记，便于路由守卫统一处理。
// router/index.js
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true }
}状态管理（Vuex/Pinia）
使用状态管理工具存储用户登录状态，避免频繁读取 localStorage。
// store/auth.js (Vuex 示例)
state: {
isLoggedIn: !!localStorage.getItem('token')
},
mutations: {
setLoginState(state, status) {
state.isLoggedIn = status
}
}HTTP 拦截器
在 axios 拦截器中检查 token，自动处理未授权请求。
// utils/axios.js
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
router.push('/login')
}
return Promise.reject(error)
}
)动态路由加载
根据用户权限动态加载路由，实现更细粒度的控制。
// 根据用户角色过滤路由
function filterRoutes(routes, role) {
return routes.filter(route => {
if (route.meta && route.meta.roles) {
return route.meta.roles.includes(role)
}
return true
})
}Token 过期处理
定期检查 token 有效期，或在请求失败时刷新 token。
// token 过期检查示例
function checkTokenExpiry() {
const token = localStorage.getItem('token')
if (token && isExpired(token)) {
store.commit('logout')
}
}组件级权限控制
在组件中使用计算属性或自定义指令控制元素显示。
// 自定义权限指令
Vue.directive('permission', {
inserted(el, binding) {
if (!store.getters.hasPermission(binding.value)) {
el.parentNode.removeChild(el)
}
}
})服务端验证
前端控制只是辅助手段，关键权限校验必须由服务端完成。
// API 请求必须携带 token
axios.get('/api/data', {
headers: { 'Authorization': `Bearer ${token}` }
})实现完整的登录访问控制需要前后端配合，前端主要负责用户体验层面的控制，真正的安全校验应由后端完成。定期清理本地存储的敏感信息，确保安全性。
