如何使用 Vue.js 保护管理路由？

Question

我一直在使用 localStorage 来存储 JWT 令牌并进行身份验证，它工作正常，因为后端受到保护，什么不是，是 Vue.js 及其组件中的前端页面，任何人都可以创建一个浏览器中的错误令牌并访问页面，面板菜单，但由于令牌被后端无效，因此未加载数据。您是否意识到用户将能够正常浏览页面？我怎样才能避免这种情况？只允许经过后端验证的用户浏览网站。

我正在使用 Vuex，但我想不出解决方案。 isLogged 状态接收 localStorage 令牌，因此用户可以轻松绕过浏览器。

---

我想到了一个解决方案，不要评判我。在进入每条路由之前，向后端发送请求检查token，如果为false，则移除localStorage，这样可以吗？

Answer 1

我会说你的解决方案一开始是一个相当不错的解决方案，但我认为你可以改进一下。

因为您使用的是 VueX，所以您可以将用户（或其他一些变量）存储在 Vuex 商店中。然后在每条路线之前，您可以检查商店是否有用户。

如果 Store 没有用户，请检查 localStorage 是否有令牌。如果没有令牌，则用户无权前往该路线。

如果 localStorage 确实有令牌，则调用后端并检查令牌是否有效。如果令牌有效，则将用户存储在 Vuex Store 中并继续。如果令牌无效，则用户无权前往该路由。

这将防止您在仍然进行验证的同时创建对后端的不必要调用。

Answer 2

或者，例如，您可以在您的商店状态中拥有一个具有类似“userRole”的用户对象，这样您就可以检查身份验证/令牌/角色。