Vue2-Router路由守卫

最新推荐文章于 2024-10-17 11:55:04 发布

库库林_沙琪马

最新推荐文章于 2024-10-17 11:55:04 发布

阅读量333

点赞数 8

分类专栏： # Vue组件直接使用文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/iku_n/article/details/137692533

版权

本文介绍了如何在前端使用v-if条件和路由守卫来限制非管理员用户访问特定功能，如隐藏管理员菜单并重定向至403或404页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端隐藏

简单的加一个 v-if 即可

注意：

虽然在前端非管理员用户看不到了，但是用接口仍然可以直接访问

<el-submenu index="info" v-if="user.role === '管理员'">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>信息管理</span>
            </template>
            <el-menu-item index="/user">用户信息</el-menu-item>
          </el-submenu>

路由守卫

写在 router/index.js 内

简单来说就是，如果是非管理员用户访问 adminPaths内的路径，直接重定向到 '/403'页面内

router.beforeEach(async (to, from, next) => {
  // to 是到达的路由信息

最低0.47元/天解锁文章