[英]How to have auth.loggedIn before rendering in Nuxt.js?
使$auth.loggedIn
可用的/api/user/
请求发生在客户端已经加载/开始加载之后。 这使得我的一些模块在$auth.loggedIn
变为 true/false 后呈现然后消失,使页面加载时一切看起来都很混乱。
如果对/api/user/
的调用以与 asyncData 请求相同的方式发生,以便$auth.loggedIn
在任何呈现之前可用,那将是理想的。 是否有任何设置/配置使这成为可能? 我正在使用通用模式。
您可以在此处使用 Nuxt 中定义的中间件在您的情况下,您可以在/api/user
上执行您的请求,例如在名为userLoggedIn
的中间件中。
export default function (context) {
// Here we return a Promise in the middleware to make it asynchronous
// Cf doc https://nuxtjs.org/guide/routing#middleware
// So we return a promise that can only be resolved when the function resolve is called
return new Promise(resolve => this.$axios.$get('/api/user'/).then((user) => {
if (!user) {
console.log('NOT LOGGED');
// Do something if not logged, like redirect to /login
return context.redirect('/login');
}
resolve(user);
}));
}
我用 $axios 提出了一个建议,但你当然可以改变它。 您只需要保留中间件并承诺有一个异步中间件。
然后在您等待查询的页面上,您可以添加:
export default {
middleware: [
'userLogged',
],
data() {...}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.