当我使用 API 和 JWTs 令牌时，如何保护我的 Vue.js 路由？

Question

我正在构建一个应用程序，其中 Adonis.js 用于 API，Vue.js 用于 front-end。我正在使用 JWT 令牌来保护我的 API.

的所有路由

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

当我从 Vue 调用我的 API 时，我在 header 中写入活跃用户的令牌，并在我的 API 中验证令牌是否“活跃”并且如果归因于用户帐户（然后调用我的数据库..）。

但问题是（对我来说）我不明白如何为我的 vue 路由制作一个中间件（验证用户是否经过身份验证）。我已经阅读了一些关于它的教程，结论是 => 将令牌存储在本地存储中（好的，这是合乎逻辑的）并制作一个中间件来检查令牌是否存在。

但我认为这个选项非常不安全，因为如果我在本地存储中手动创建令牌，我可以在我的路线中“输入”..

我对这个概念很困惑..你能开开我的眼睛吗？谢谢

Answer 1

所以是的，你是对的，你应该使用 Vuex 来存储令牌的值，以便在你的 components/middleware 中使用 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();
})

祝你好运！

How I secure my Vue.js routing when I work with an API and JWTs token?