Javascript 如何在服务器端验证Nuxt？

我花了一个晚上寻找解决这个问题的方法，似乎很多人都有，最好的建议通常是“切换到SPA模式”，这对我来说不是一个选择

我用JWT进行身份验证，使用Rails的

JWTSessions

gem

在前端，我使用了Nuxt和

Nuxt auth

，使用自定义方案，以及以下授权中间件：

导出默认函数（{$auth，route，redirect}）{
const role=$auth.user&&$auth.user.role
if（route.meta[0].requiredRole！==角色）{
重定向（“/login”）
}
}

我的症状如下：如果我登录并浏览受限制的页面，一切正常。我甚至为受限页面设置了

fetchOnServer:false

，因为我的公共页面只需要SSR

但是，一旦我刷新页面或直接导航到受限URL，中间件会立即将我重定向到登录页面。显然，在客户端进行身份验证的用户也没有在服务器端进行身份验证

我有以下相关文件

numxt.config.js

。。。
插件：[
// ...
{src:'~/plugins/axios'}，
// ...
],
// ...
模块：[
“cookie universal nuxt”，
“@nuxtjs/axios”，
“@nuxtjs/auth”
],
// ...
axios：{
baseURL:process.env.NODE_env==='production'？'https://api.example.com/v1' : 'http://localhost:3000/v1',
凭据：正确
},
认证：{
战略：{
JWT会议：{
_scheme:“~/plugins/auth jwt scheme.js”，
端点：{
登录：{url:'/signin'，方法：'post'，属性名称：'csrf'}，
注销：{url:'/signin'，方法：'delete'}，
用户：{url:'/users/active'，方法：'get'，属性名称：false}
},
所需标记：true，
标记类型：false
}
},
曲奇：{
选项：{
最大年龄：64800，
安全：process.env.NODE_env==='production'
}
}
},

auth jwt scheme.js

const令牌选项={
所需标记：true，
标记类型：false，
环球托肯：没错，
令牌名称：“X-CSRF-TOKEN”
}
导出默认类LocalScheme{
构造函数（身份验证，选项）{
这是。$auth=auth
this.name=选项。\u name
this.options=Object.assign（{}，tokenOptions，options）
}
_setToken（令牌）{
if（this.options.globalToken）{
this.$auth.ctx.app.$axios.setHeader（this.options.tokenName，token）
}
}
_clearToken（）{
if（this.options.globalToken）{
this.$auth.ctx.app.$axios.setHeader（this.options.tokenName，false）
此.$auth.ctx.app.$axios.setHeader（'Authorization'，false）
}
}
挂载（）{
if（此.options.tokenRequired）{
const token=this.$auth.syncToken（this.name）
此._setToken（令牌）
}
返回此值。$auth.fetchUserOnce（）
}
异步登录（端点）{
如果（！this.options.endpoints.login）{
返回
}
等待此消息。_logoutLocally（）
const result=等待此操作。$auth.request(
终点，
this.options.endpoints.login
)
if（此.options.tokenRequired）{
const token=this.options.tokenType
？this.options.tokenType+''+结果
：结果
this.$auth.setToken（this.name，token）
此._setToken（令牌）
}
返回此参数。fetchUser（）
}
异步setUserToken（tokenValue）{
等待此消息。_logoutLocally（）
if（此.options.tokenRequired）{
const token=this.options.tokenType
？this.options.tokenType+“”+tokenValue
：标记值
this.$auth.setToken（this.name，token）
此._setToken（令牌）
}
返回此参数。fetchUser（）
}
异步获取用户（端点）{
if（this.options.tokenRequired&！this.$auth.getToken（this.name））{
返回
}
如果（！this.options.endpoints.user）{
此.$auth.setUser（{}）
返回
}
const user=等待此操作。$auth.requestWith(
这个名字，
终点，
this.options.endpoints.user
)
此.$auth.setUser（用户）
}
异步注销（端点）{
if（this.options.endpoints.logout）{
等待此消息。$auth
.requestWith（this.name、endpoint、this.options.endpoints.logout）
.catch（（）=>{}）
}
返回此。\u logout locally（）
}
异步\u本地注销（）{
if（此.options.tokenRequired）{
这个._clearToken（）
}
返回等待此操作。$auth.reset（）
}
}

axios.js

导出默认函数（上下文）{
const{app$axios，redirect}=context
$axios.onResponseError（异步（错误）=>{
const response=error.response
const originalRequest=response.config
const access=app.$cookies.get（'jwt\u access'）
const csrf=originalRequest.headers['X-csrf-TOKEN']
const credentialed=（process.client&&csrf）| |（process.server&&access）
if（credentialed&&response.status==401&&！originalRequest.headers.REFRESH）{
if（process.server）{
$axios.setHeader（'X-CSRF-TOKEN'，CSRF）
$axios.setHeader（'Authorization'，access）
}
const newToken=await$axios.post（'/refresh'，{}，{headers:{refresh:true}}）
if（newToken.data.csrf）{
$axios.setHeader（'X-CSRF-TOKEN'，newToken.data.CSRF）
$axios.setHeader（'Authorization'，newToken.data.access）
如果（应用程序$auth）{
应用程序$auth.setToken（'jwt_access'，newToken.data.csrf）
应用程序$auth.syncToken（'jwt\U访问权'））
}
originalRequest.headers['X-CSRF-TOKEN']=newToken.data.CSRF
originalRequest.headers.Authorization=newToken.data.access
if（process.server）{
app.$cookies.set（'jwt_access'，newToken.data.access，{path:'/'，httpOnly:true，maxAge:64800，secure:false，overwrite:true}）
}
返回$axios（原始请求）
}否则{
如果（应用程序$auth）{
应用程序$auth.logout（）
}
重新使用