使用 Vue.js 进行 JWT 身份验证

Question

我正在使用 Vue.js 和 vue-router 开发 SPA，现在我正在使用 JWT 处理授权/身份验证。我对后端（API 端点）进行了整理，这样它将发出一个令牌以响应登录并检查后续请求中是否存在必要的标头。我现在想实现客户端（Vue.js）端。

据我了解，基本上我需要做的是要求对除“/”和“/login”之外的所有路由进行身份验证。如果存在身份验证，则我在 Authorization 标头中提交令牌（成功登录后存储在 localStorage 中）。如果它未能在服务器上成功验证，则由于错误响应，用户将被重定向到“/login”。

所以，我有几个关于我需要做些什么来实现它的问题：

1. 除了登录端点之外，如何最好地为每个请求提交标头？我知道使用用于 AJAX 的 JQuery，我可以配置一个全局“ajaxSetup”，这将导致每个请求都提交标头，但是如何指定异常？为每个 API 端点请求单独添加标头很麻烦。

2. 同样，我如何设置适用于所有路由的身份验证预检查，除了提到的 2 个路由（'/' 和 '/login'）？

3. 鉴于我正在使用是否存在明显有效的身份验证（显然因为它仍然必须在 API 端点上进行验证）来确定是否显示某些菜单项等，是根据令牌有效负载中的“范围”字段确定，使这更细化并针对不同的权限级别显示不同的内容是否可行？显然，处理 JWT 令牌的最简单方法是纯粹确定它是否存在，因此客户端不需要解析内容。但是鉴于 JWT 确实允许有意义的内容，尝试在客户端和服务器上使用该含义是不是一个坏主意？显然，如果令牌本身是加密的，这将变得不太实用，所以我的想法是使用未加密的令牌（并确保在有效负载中不会暴露任何后果）。

Answer 1

您可以做全局标头，当用户通过身份验证时，将令牌添加到全局标头中，如本例，我使用的是 Axios。

axios.defaults.headers.common['Authorization'] = "Bearer"+  authtoken.token

要检查用户的身份验证或管理网站的某些部分，只需添加全局变量，并在用户通过身份验证时将变量设置为 true。或者，使用 Vuex，它会很容易，您想要隐藏或向用户显示的元素只需将 v-if 添加到元素中，例如（使用 Vuex 的示例）

<div v-if="this.$store.state.authenticated"> Hide Element from Guests </div>

对于路由，在您的路由中添加元字段以指示路径需要身份验证

{
        path: '/dashboard',
        component: DashboardPage,
        name: 'Dashboard',
        meta: {requiresAuth: true} // Meta Field , you can name it 
}

在你的 Vue 路由器配置中添加导航守卫，检查元字段是否存在，如果为真，则检查用户是否经过身份验证

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  if(to.meta.requiresAuth) { // check the meta field 
    if(store.state.Authenticated) { // check if the user is authenticated
        next() // the next method allow the user to continue to the router 
    }
    else {
        next('/') // Redirect the user to the main page
    }
}
else {
    next()
}
})