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

【问题标题】：How I secure my Vue.js routing when I work with an API and JWTs token?使用 API 和 JWT 令牌时如何保护 Vue.js 路由？
【发布时间】：2019-11-07 16:09:42
【问题描述】：

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

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

当我从 Vue 调用我的 API 时，我会在标头中写入活动用户的令牌，并在我的 API 中验证令牌是否为“活动”以及是否归属于用户帐户（然后进行调用到我的数据库..)。

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

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

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

【问题讨论】：

您无法保护客户端的任何内容。你的前端代码中不应该有任何敏感的东西。伪造其 JWT 的用户可以访问您的前端路由，但该 JWT 仍应发送到后端以授权访问实际数据。

标签： vue.js authentication jwt adonis.js jwt-auth

【解决方案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();
})

祝你好运！

【讨论】：