Question

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

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

所以，我有几个问题需要做些什么来实现这个：

除了登录端点之外，如何最好地为每个请求提交标头？我知道JQuery，我用于AJAX，我可以配置一个全局'ajaxSetup'，它将导致每个请求都提交头，但我如何指定异常？单独将标头添加到每个API端点请求是很麻烦的。
同样，如何设置适用于除上述2（'/'和'/ login'）之外的所有路线的身份验证预检？
鉴于我正在使用明显有效的身份验证（显然是因为它仍然需要在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 Router配置中添加检查元字段存在的导航警卫，如果为true则检查用户是否经过身份验证

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

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

1 个答案: