从Laravel Vue.js或React.js MPA调用受保护的API路由

，需要以下步骤：

创建受保护的API路由：在Laravel框架中，可以通过使用api路由组来定义受保护的API路由。在routes/api.php文件中，可以使用Route::group方法来定义受保护的API路由，同时可以指定需要进行身份验证的中间件。

Route::group(['middleware' => 'auth:api'], function () {
    // 受保护的API路由定义
});

配置身份验证：在Laravel中，可以使用Passport或Sanctum等身份验证工具进行API身份验证。可以根据实际需求选择适合的身份验证工具。

Passport身份验证配置：安装并配置Passport可以为API路由提供OAuth2身份验证。详情请参考Passport文档。腾讯云相关产品推荐使用腾讯云API网关，详情请参考API网关产品介绍。
Sanctum身份验证配置：安装并配置Sanctum可以为API路由提供基于令牌的身份验证。详情请参考Sanctum文档。

创建API调用：在Vue.js或React.js中，可以使用Axios或Fetch等工具来进行API调用。可以根据需要在前端代码中创建API调用的函数，并使用合适的方式进行身份验证。

使用Axios进行API调用示例：

import axios from 'axios';

const apiURL = 'https://example.com/api'; // 替换为实际的API URL

const axiosInstance = axios.create({
  baseURL: apiURL,
  headers: {
    // 添加身份验证相关的请求头
    Authorization: `Bearer ${token}`, // 替换为实际的身份验证令牌
  },
});

export const fetchData = async () => {
  try {
    const response = await axiosInstance.get('/data'); // 替换为实际的API路由
    return response.data;
  } catch (error) {
    console.error(error);
    return null;
  }
};

使用Fetch进行API调用示例：

const apiURL = 'https://example.com/api'; // 替换为实际的API URL

const fetchData = async () => {
  try {
    const response = await fetch(`${apiURL}/data`, {
      headers: {
        // 添加身份验证相关的请求头
        Authorization: `Bearer ${token}`, // 替换为实际的身份验证令牌
      },
    });
    return response.json();
  } catch (error) {
    console.error(error);
    return null;
  }
};

在前端页面中调用API：在Vue.js或React.js的组件中，可以调用创建的API调用函数来获取API数据，并在页面中进行展示。

import { fetchData } from './api'; // 替换为实际的API调用函数路径

export default {
  data() {
    return {
      data: null,
      loading: true,
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    async loadData() {
      this.loading = true;
      this.data = await fetchData(); // 调用API调用函数获取数据
      this.loading = false;
    },
  },
};

通过以上步骤，可以实现从Laravel Vue.js或React.js MPA调用受保护的API路由，并在前端页面中展示API数据。以上示例中的腾讯云相关产品推荐使用腾讯云API网关来提供API调用和身份验证的服务。详情请参考API网关产品介绍。