错误 localStorage 未在referesh（Nuxt Js，解析服务器）上定义

Question

在页面刷新时出现上述错误，但我没有在代码中使用 localStorage。

Answer 1

在以下 if 语句中执行只能在浏览器中执行的操作：

if (process.client) {
localStorage...
}

参见：https://nuxtjs.org/api/context/

另一种选择是仅在

beforeMount

或

mounted

函数中调用它，因为它们总是发生在客户端。

Answer 2

您的应用程序运行在服务器上，因此没有浏览器或窗口，这意味着您无权访问浏览器提供的 API。 您可以通过在尝试访问窗口对象之前检查它是否可用来防止此错误。例如：

const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;

//OR

if (typeof window !== 'undefined') {
    const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;
}

Answer 3

我所做的是创建了一个类似的状态

const thisWindow = useState('thisWindow')

在app.vue onMounted中设置窗口就像

onMounted( () => {
  thisWindow.value = window
})

并且只是在我的函数和全局中调用它

Answer 4

经过多次尝试寻找解决方案，我无法弄清楚。以下是我如何在 Nuxt.js 3 中间件中使用 localStorage。下面的代码将该过程分为两步。

第 1 步：通过使用 ref(localStorage.getItem("access_token")) 从 localStorage 检索数据，将 _token 分配给状态。然后，我将其分配给 composables/useAuthToken.js 文件夹中的一个状态。这只是一段简单的代码：

export const useAuthToken = () => {
    return useState("token", () => null);
};

之后获取令牌并设置为状态useAuthToken

const _token = ref(localStorage.getItem("access_token"));
const token = useAuthToken(); 
token.value = _token;

第2步：检索令牌并使用它来请求用户数据。我成功使用了存储在 localStorage 中的令牌。这是代码，有需要的人可以参考一下。

最后我把它分成了两个中间件，并用名字来调用。

<script setup>

definePageMeta({
     /* middleware/getToken => middleware 1 */
    middleware: [function (to, from) {
        if (process.client) {
            const _token = ref(localStorage.getItem("access_token"));
            const token = useAuthToken();
            token.value = _token;
        }
    },
    /* middleware/auth.js => middleware 2 */
    async function (to, from) {
        const { login, me } = useAuth();
        const token = useAuthToken();
        const user = useAuthUser();
        const router = useRouter();

        /* The line of code await me(token.value); is used to send a request to the server to retrieve user data using the token. */

        await me(token.value);
    
        if(!user.value || !user.value.active){
            router.push({ name: "signin" })
        }
    }
],
});
</script>

抱歉，我不懂英语，我正在尝试翻译给可能需要它的人。

Answer 5

截至撰写本文之日，

localStorage

可在 Vue 的

onBeforeMount()

和

onMounted()

生命周期挂钩中使用...这是一个示例：

    onBeforeMount(() => {
    localStorage.setItem('greeting', 'hey!')

    console.log(localStorage.getItem('greeting'))
    })