Question

如何防止用户访问 JS 框架中的页面？

Tldr：
如果安全真的很重要，那么服务器端渲染得更好吗？

如果我们假设有一个登录页面，那么它在成功时会发回一个 cookie（只设置 http 和安全标志）和一个令牌。据我所知，这个令牌经常在客户端本地设置，例如使用 Vuex commit('SET_TOKEN', response.data.token);

然后使用某种机制定义路由以检查是否允许用户查看它。例如

export default [
  {
    path: '/secret',
    name: 'secret',
    meta: {requiresAuth: true},
    component: () => import('@/pages/Secret.vue')
  }
]

使用 VueRouter 进行检查。
例如

router.beforeEach((to, from, next) => {
    const requiresAuth = to.matched.some((record) => record.meta.requiresAuth)
    const isTokenSet = store.getters.token

    if (requiresAuth && !isTokenSet) {
        alert('thou shall not pass')
        return next('/')
    }

    return next()
})

由于该值是从商店中获取的，并且都是在客户端保存的，所以我假设它可以被错误地设置，所以会让攻击者在不登录的情况下看到页面。
当用于获取数据的 API 可以根据用户 ID/令牌进行进一步检查以防止它发生时，任何动态内容都可能被隐藏，但页面仍然可以查看。

相比之下，服务器端呈现的页面会检查用户的请求，看看他们是否被允许，如果没有被重定向。我知道这是 100% 安全的，但不能像有人在前端玩那么容易。任何我能想到的我都不会说的都是安全的，因为当网站是用 JavaScript 构建时，整个代码就在那里。

是否有更好的方法来保护基于 Vue 的站点，或者最好避免创建一个安全性至上的站点？

在 Vue 环境（或任何其他 JS 框架）中阻止页面访问

0 个答案: