使用API​​和JWT令牌时如何保护Vue.js路由？

Question

我正在使用Adonis.js（用于API）和Vue.js（用于前端）构建应用程序。我正在使用JWT令牌来保护我的API的所有路由。

我了解JWT保护API路由的功能。用户创建帐户时，会创建一个令牌来识别用户。

当我从Vue调用我的API时，我将活动用户的令牌写在标头中，然后在我的API中，我验证该令牌是否为«active»以及是否归因于用户帐户（之后进行一次调用）到我的数据库..）。

但是问题是（对我来说）我不知道如何制作中间件到我的Vue路由（验证用户是否通过身份验证）。我已经阅读了一些有关此内容的教程，结论是=>将令牌存储在本地存储中（好吧，这是合乎逻辑的），并制作一个中间件来检查令牌是否存在。

但是我认为此选项并不安全，因为如果我在本地存储中手动创建令牌，则可以在路由中“输入”。

我对这个概念感到非常困惑。你能睁开眼睛吗？ 谢谢

Answer 1

是的，您是对的，应该使用Vuex存储令牌的值，以便在组件/中间件中使用getters来检索令牌。您的state看起来像这样：

export const state = () => ({
    api_token: localStorage.getItem("api_token")
});

getters看起来像这样：

export const getters = {
    apiToken(state) {
        return state.api_token;
    }
}

要保护前端中的路由，您将使用路由器保护功能（https://router.vuejs.org/guide/advanced/navigation-guards.html）。为了让您有个好主意，这是一个简单的检查：

router.beforeEach((to, from, next) => {
  if (!store.getters["auth/apiToken"]) next('/login');
  else next();
})

祝你好运！