vue.js - 如何使用 Vue.js 保护管理路由?
问题描述
我一直在使用 localStorage 来存储 JWT 令牌并进行身份验证,它工作正常,因为后端受到保护,什么不是,是 Vue.js 及其组件中的前端页面,任何人都可以在浏览器并访问页面、面板菜单,但由于令牌被后端无效,因此未加载数据。您是否意识到用户将能够正常浏览页面?我怎样才能避免这种情况?只允许经过后端验证的用户浏览网站。
我正在使用 Vuex,但我想不出解决方案。isLogged 状态接收 localStorage 令牌,因此用户可以轻松绕过浏览器。
我想到了一个解决办法,不要评判我。在进入每条路由之前,向后端发送请求检查token,如果为false,则删除localStorage,这样会好吗?
解决方案
我会说你的解决方案一开始是一个相当不错的解决方案,但我认为你可以改进一下。
因为您使用的是 VueX,所以您可以将用户(或其他一些变量)存储在 Vuex 商店中。然后在每条路线之前,您可以检查商店是否有用户。
如果 Store 没有用户,请检查 localStorage 是否有令牌。如果没有令牌,则用户无权前往该路线。
如果 localStorage 确实有令牌,则调用后端并检查令牌是否有效。如果令牌有效,则将用户存储在 Vuex Store 中并继续。如果令牌无效,则用户无权前往该路线。
这将防止您在仍然进行验证的同时创建对后端的不必要调用。
推荐阅读
- amcharts - AmCharts:非常大的数据集的数据分组
- node.js - 如何在mongodb中获取单个数组返回值?
- python - 如何在python中以编程方式分配变量名?
- r - 将函数应用于 xts quantmod 的子集
- python - 使用 JSON 文件存储和检索列表数据
- r - 从 R 中的 github 下载压缩的 csv
- javascript - 访问 Enzyme & React Hooks 中嵌套按钮的 onClick fn
- c# - 用于在 C# 源代码中捕获预处理器指令符号的正则表达式
- c# - 这是 Azure CosmosDB 中的高效结构/查询吗?
- r - 如何在 R 中的新文件中继续项目