vue实现封锁页面
Vue 实现封锁页面的方法
使用全局路由守卫
在 Vue 项目中，可以通过 router.beforeEach 全局路由守卫拦截导航，实现页面封锁。例如，检查用户权限或登录状态，未通过验证时重定向到指定页面。
// router/index.js
router.beforeEach((to, from, next) => {
const isAuthenticated = checkAuth(); // 自定义验证逻辑
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login'); // 跳转到登录页
} else {
next();
}
});动态组件或 v-if 控制
通过 Vue 的响应式数据结合 v-if 或动态组件，可以动态渲染或隐藏页面内容。例如，根据权限状态显示提示信息。
<template>
<div v-if="isLocked">
<p>当前页面不可访问，请联系管理员。</p>
</div>
<div v-else>
<!-- 正常页面内容 -->
</div>
</template>
<script>
export default {
data() {
return {
isLocked: false // 根据业务逻辑更新状态
};
}
};
</script>自定义指令实现元素级封锁
通过 Vue 自定义指令，可以精确控制页面中特定元素的访问权限。例如，禁止未授权用户操作按钮。
// main.js 或单独指令文件
Vue.directive('lock', {
inserted(el, binding) {
if (!binding.value) {
el.style.opacity = '0.5';
el.style.pointerEvents = 'none';
}
}
});<button v-lock="hasPermission">提交</button>后端配合实现完整封锁
前端封锁需结合后端验证，避免本地数据被篡改绕过。例如，在接口请求时返回 403 状态码，前端拦截并处理。
// axios 拦截器示例
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 403) {
router.push('/locked'); // 跳转到封锁提示页
}
return Promise.reject(error);
}
);注意事项
- 前端封锁仅为用户体验优化，敏感功能必须依赖后端验证。
- 路由守卫适用于全页面封锁，而指令或
v-if适合局部内容控制。 - 封锁状态应通过 Vuex 或 Pinia 全局管理，确保多组件状态同步。
