Nuxt3：在每次请求时向客户端提供服务器评估的变量

Question

我正在寻找一种方法来评估服务器端的变量并将其提供给客户端。基本上，当从内部 IP 地址访问时，我的网站有一个设置菜单。如果客户端是外部的/默认情况下，我想隐藏该菜单。

显然这是不安全的，到该设置网站的路由以及菜单可以进行的所有潜在 API 调用都在服务器端受到保护。但作为附加视觉效果，我想隐藏该菜单。

因此，每次服务器向客户端提供网站时，我都会检查他们的 IP 地址并将

shouldShowSettings

变量设置为 true 或 false。然后需要在每个页面上可见的菜单组件中评估该变量。

Answer 1

首先，在 nginx conf 中添加一些配置

proxy_set_header Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

然后，在您的 nuxt3 项目中添加一个新的商店文件（假设您已经在使用

@pinia/nuxt

）。

stores/ip.ts

import {
    defineStore
} from 'pinia';

export const useIpStore = defineStore('ip', {

    state: () => ({
        _ip: ''
    }),

    getters: {
        ip: (state) => state._ip,
        isAdminIp: (state) => __YOUR_IP_WHITE_LIST_ARRAY__.includes(state._ip)
    },

    actions: {
        setIp (ip: string) {
            this._ip = ip;
        }
    }
});

在您的

/plugins

中创建一个插件（可能类似于

init.ts

）

import { defineNuxtPlugin } from '#app';
import { useIpStore } from '~/stores/ip';

export default defineNuxtPlugin(async (nuxtApp) => {

    const headers = useRequestHeaders();

    const ip = headers['x-real-ip'] ?? '';

    const ipStore = useIpStore();

    ipStore.setIp(ip);
});

---

现在，你可以在你的网站上使用它了，这是SSRable的

<template>
   <aside
       v-if="shouldShowSettings"
   >
       admin only
   </aside>
</template>

<script lang="ts" setup>

import { useIpStore } from '~/stores/ip';

const ipStore = useIpStore();

const shouldShowSettings = computed(() => ipStore.isAdminIp);

</script>

---

有关启动 nuxt 的更多信息，这是另一个可能有帮助的答案