我学习Vue已经两周了,我找不到关于路由安全问题的答案.

当我在Vue中使用元字段和examle中的路由保护程序保护路由时,我想知道客户机可以做些什么来仍然看到组件.

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})



router.beforeEach((to, from, next) => {
  // check if authenticated by jwt from store or localstorage
})

路由/foo/bar由Beforeach钩子和requiresAuth元字段保护.但所有这些代码都在客户端(作为缩小版,但仍然存在).用户可以修改代码并查看组件

推荐答案

如果用户修改了frontend代码,那么component将是可见的,是的.

但是将填充该组件的data应该是not be viewable,因为后端限制了对此类数据的访问.

如果后端没有对其进行限制,则这是一个很大的安全漏洞,与Vue无关(攻击者可以在没有JS客户端的情况下从API directly请求).

至于路由,您正在进行的身份验证更多地是一个工作流/可用性问题.这是因为,一般来说,没有办法阻止前端代码的更改.你可以做缩小+丑化来增加难度,但仅此而已.(通常进行缩小是为了提高性能,甚至不是出于安全原因.)

如果你想把你的应用分成几块,看看Vue-Router/Lazy Loading Routes:

当使用绑定器构建应用程序时,JavaScript绑定可能会变得相当大,从而影响页面加载时间.如果我们能将每条路由的组件分割成一个单独的块,并且只在访问路由时加载它们,效率会更高.

从技术上讲,您可以保护一个区块,只允许特定权限的用户下载.不过,你应该问问自己,实现这一目标所需的工作是否真的值得

Vue.js相关问答推荐

我可以将Created()中内置的内容传递给Provide属性吗?

vuejs3 youtube-plugin YT 未定义控制台错误

如何在 vue js 的一页路由下显示不同的 category._id

带有热重载的 docker 容器上的 Vue.js 应用程序

在 vue 3 中使用 vue-chartjs:createElement 不是函数

如何在 vue.js 2 的其他组件中调用方法?

是否可以在没有 Vue 的情况下使用 Vuex?

在 vuejs 中将旧代码修改为 vue router 4

使用 vue-property-decorator 时注册本地组件

将 props 传递给 Vue 组件中的元素属性

Vuetify / Offline离线图标

如何使表格行可点击并展开行 - vue.js - element-ui

Vue 如何使用 slot 和 slot-props 测试组件

无法访问数据对象的嵌套属性

如何告诉 Vue-cli 我的应用程序的入口点在哪里?

Leaflet+Vue+Vuetify / Leaflet map 隐藏 vuetify 弹出对话框

VueJS 路由 - 使用子路由和 Vuetify 时如何停止多个活动路由(active routes)?

使密码字符隐藏在 Vuetify 字段中

NPM:403 禁止 - PUT http://registry.npmjs.org/[package-name] - 禁止

如果通过 jquery 更新,Vuejs 绑定不起作用