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

Question

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

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

---

我想到了一个解决方案，不要判断我。在进入每条路由之前，向后端发送请求以检查令牌，如果为false，则删除localStorage，这会是一个好方法吗？

Answer 1

我想说您的解决方案从一开始就是一个不错的解决方案，但我认为您可以对其进行一些改进。

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

如果商店没有用户，请检查localStorage是否具有令牌。如果没有令牌，则用户无权进入该路线。

如果localStorage确实有令牌，请调用后端并检查令牌是否有效。如果令牌有效，则将用户存储在Vuex商店中并继续。如果令牌无效，则表明该用户无权进入该路线。

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

Answer 2

或者例如，您可以在商店状态下拥有一个用户对象，该对象具有类似于“ userRole”的内容，这样您就可以检查Authentication / Token / Role。