vue.js - 使用 Vue.js 的 JWT 身份验证

Question

我正在使用 Vue.js 和 vue-router 开发 SPA，我现在正在使用 JWT 处理授权/身份验证。我整理了后端(API 端点)，这样它将发出 token 以响应登录并检查后续请求的必要 header 。我现在想实现客户端 (Vue.js)。

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

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

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

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

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

Answer 1

你可以做全局 header ，当用户通过身份验证时，将 token 添加到全局 header ，就像这个例子，我使用的是 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 Router 配置中添加导航守卫来检查元字段是否存在，如果为真，则检查用户是否已通过身份验证

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()
}
})