时间戳

首页 > 解决方案 > Laravel：当给定参数无效时，将用户重定向到自定义 404 页面

laravel - Laravel：当给定参数无效时，将用户重定向到自定义 404 页面

问题描述

我制作了一个应用程序，用户可以在其中创建一些论文并查看模板中的所有数据。每篇论文都有一个在创建时生成的连接代码。

我在web.php中定义了加入路由，如下所示：

Route::get('/conceptPaper/lobby/{joincode}', 'App\Http\Controllers\ConceptPaperController@join');

和控制器中的连接功能如下：

public function join($joincode)
    {
        try { 
            $conceptPaper = ConceptPaper::where('join_code', $joincode)->firstOrFail();
            return response()->json($conceptPaper);
        } catch(ModelNotFoundException $e)
        {
            return view('errors.404');
        }
    }

我使用firstOrFail检查加入代码是否存在。如果存在，则应返回响应，否则应将用户重定向到自定义 404 页面。

我创建了一个自定义组件，它获取连接代码作为路由参数并显示概念文件

{
        path: '/conceptPaper/lobby/:joincode',
        name: 'conceptPaper',
        component: () => import('./views/ConceptPaper.vue')
    },

因此，当用户使用正确的代码加入大厅时，他会被重定向到包含相应论文中所有数据的页面：

showPaper: async function (conceptPaper) {
      const joinCode = conceptPaper.join_code;
      this.$router.push({ name: "conceptPaper", params: { joincode: joinCode }, });
    },

我的问题是，当用户输入错误的代码时，他仍然会被重定向到视图。当我检查网络选项卡中的响应时，它会显示 404 页面。

我认为我从根本上构建了它是错误的。谁能告诉我如何以正确的方式做到这一点？当用户输入正确的连接代码时，他应该会看到ConceptPaper.vue视图。当代码错误时，他应该被重定向到 404 页面。

标签： laravelvue.js

解决方案

从您的代码中，我假设您将 VueJs 用作 SPA，并且您正在从 laravel 后端 API 检索数据。

基于此，您的连接函数应该返回您在前端使用的 json 数据，但如果ConceptPaper找不到，您将返回一个视图而不是 json，这不会有太大变化，因为您只是在更改数据你的前端收到，但前端组件没有改变。

我要做的是删除try catch块，它将从API返回404响应，并在vue中处理404情况，并在vue中创建一个NotFound视图。

拉拉维尔

public function join($joincode)
{
    $conceptPaper = ConceptPaper::where('join_code', $joincode)->firstOrFail();
    return response()->json($conceptPaper);
}

Vue

router/index.js

const routes = [
  // previous routes
  {
    path: '/not-found',
    name: 'NotFound',
    component: () => import('../views/NotFound.vue')
  }
]

NotFound.vue

<template>
// page here
</template>
export {
    name: 'NotFound'
}

最后处理未找到的 API 调用，如果您使用的是 axios

axios.get('/conceptPaper/lobby/-1000')
  .catch(function (error) {
    if (error.response.status === 404) {
        this.$router.push('NotFound');
    }
  });

推荐阅读