在next布局函数中获取localStorage数据

Question

我有这样一个问题:我需要在pages/index.vue加载下一个布局之前获得localStorage数据

/pages/index.vue

<script>
export default {
layout (context) {
if (localStorage.getItem('AUTH_TOKEN')){
this.$store.dispatch('changeAuthStatus', {
authStatus: true,
accessToken: localStorage.getItem('AUTH_TOKEN'),
profileData: JSON.parse(localStorage.getItem('PROFILE_DATA'))
}).then(() => {
this.$store.dispatch('changeLoadedStatus', {
isLoaded: true
})
})
}
else {
this.$router.push('/auth')
}
}
</script>

页面加载错误:localStorage is not defined

也许我可以使用上下文获得localStorage数据?或者你可以给我建议任何一个包，这样我可以在layout函数中使用它?

Answer 1

我找到了解决方案:

我刚刚安装了Amirhossein Shahbazi建议的next -universal-storage模块。我刚刚这样做了:

/页面/index.vue:

<script>
export default {
middleware: ['auth'],
layout (context) {
let currentRole = context.app.$storage.getUniversal('PROFILE_DATA')
console.log(currentRole)
let currentLayout = 'default'
let defaultRoles = ['customer_support_manager', 'checker', 'storekeeper']
let tabletRoles = ['deputy_cutting_shop']
if (defaultRoles.includes(currentRole.role)) {
currentLayout = 'default'
}
else if (tabletRoles.includes(currentRole.role)) {
currentLayout = 'tablet'
}
return currentLayout
}
</script>

/中间件/auth.js:

export default function ({ redirect, app, store }) {
// some token checkers for existing, for 401 error and for their validity
}

Answer 2

如果我没弄错的话，Next是Vue的SSR解决方案(与React的Next相同)，对吗?

如果是，则没有访问localStorage的权限。服务器端没有在您的浏览器中运行!

Answer 3

这种代码工作得很好

<script>
export default {
layout({ store }) {
if (process.client) {
console.log('localStorage?', localStorage.getItem('myCat'))
console.log('store?', store)
}
},
}
</script>

因为服务器上没有localStorage。

尝试使用localStorage.setItem('myCat', 'Tom')，移动到您的页面，看看它如何显示localStorage和商店(不要忘记使用上下文，因为this在这里不可用)。

Answer 4

您可以使用cookie-universal- next

登录后可以设置AUTH_TOKEN"用cookie代替localStorage

window.$cookies.set('AUTH_TOKEN', token)

你可以在layout函数中以

的形式访问它

layout (context) {
let token=context.app.$cookies.get('AUTH_TOKEN')
}