所有 Laravel 路由都暴露了。如果可能，如何将其移动到 app.js 或缩小

Posted 2023-02-22

【中文标题】所有 Laravel 路由都暴露了。如果可能，如何将其移动到 app.js 或缩小

【英文标题】：All Laravel routes exposed. How to move it to app.js or minify if possible

【发布时间】：2021-05-16 08:14:34

【问题描述】：

我在我的 Laravel、Vue.js 和 Inertia js 项目中使用 Ziggy。在查看页面源码中，我可以清楚地看到所有的 Laravel 路由。

<script type="text/javascript">
    const Ziggy = "url":"http:\/\/127.0.0.1:8787","port":8787,"defaults":,"routes": 
    ......

"sup_finish_tt_order":"uri":"front\/finishorder","methods":["POST"],"assign__tt":"uri":"front\/assigntt","methods":["POST"],"technicians":"uri":"technicians","methods":["GET","HEAD"],"change-password":"uri":"change-password","methods":["GET","HEAD"],"reset.password":"uri":"c
----------
</script>

有什么方法可以在 app.js 中重新定位这个 Ziggy 对象或让它不那么明显？根据Ziggy 文档和此处尝试的答案，我尝试在 app.js 中导入它，但它不起作用。

未捕获的类型错误：无法读取未定义的属性“原型” 在 Object.inherits (app.js:124712) 在对象。 (app.js:68991) 在 Object../node_modules/irc/lib/irc.js (app.js:69342) 在 webpack_require (app.js:64) 在 Object../node_modules/ziggy/index.js (app.js:140181) 在 webpack_require (app.js:64) 在模块../resources/js/app.js (app.js:141504) 在 webpack_require (app.js:64) 在 Object.0 (app.js:142081) 在 webpack_require (app.js:64)

___________________________设置 __________________________________

//后端

$ php artisan ziggy:generate
File generated!

// 示例 /resources/js/ziggy.js 文件

const Ziggy = "url":"http:\/\/127.0.0.1:8787","port":8787,"defaults":,"routes":"debugbar.openhandler":"uri":"_debugbar\/open"  /*..... All named routes as expeted */


if (typeof window !== 'undefined' && typeof window.Ziggy !== 'undefined') 
    for (let name in window.Ziggy.routes) 
        Ziggy.routes[name] = window.Ziggy.routes[name];
    


export  Ziggy ;

// /resources/js/app.js

require('./bootstrap')
import Vue from 'vue'
import VueMeta from 'vue-meta'
import PortalVue from 'portal-vue'
import  App, plugin  from '@inertiajs/inertia-vue'
import  InertiaProgress  from '@inertiajs/progress/src'

// Ziggy start here
import route from 'ziggy';
import  Ziggy  from './ziggy';

Vue.mixin(
    methods: 
        route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config),
    ,
);
// ziggy end here



import  BootstrapVue, IconsPlugin  from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import  mixins  from 'vue-chartjs'
import TreeBrowser from './Pages/globalComponents/TreeBrowser.vue'
//Vue.config.productionTip = false
Vue.mixin( methods:  route: window.route  )
Vue.use(plugin)
Vue.use(PortalVue)
Vue.use(VueMeta)
Vue.component('TreeBrowser', TreeBrowser)
InertiaProgress.init()

let app = document.getElementById('app')

new Vue(
    metaInfo: 
        titleTemplate: (title) => title ? `$title - FNV` : 'FNV yours'
    ,
    render: h => h(App, 
        props: 
            initialPage: JSON.parse(app.dataset.page),
            resolveComponent: name =>
                import (`./Pages/$name`).then(module => module.default),
        ,
    ),
).$mount(app)

// /webpack.mix.js

const mix = require('laravel-mix');
const path = require('path');
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

mix.webpackConfig(
    resolve: 
        alias: 
            ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
        ,
    ,
);

Login.vue 中 ziggy ex 的使用

this.$inertia.post(this.route('login.attempt'), data, 
        onStart: () => this.sending = true,
        onFinish: () => this.sending = false,
      )
    ```

【问题讨论】：

我可以问“为什么”吗？您的 javascript 代码必须以一种或另一种方式知道路由，因此无论如何它都会暴露出来

然而，但它们至少不在 html 中。

基于接受的答案并通过删除 ``` Vue.mixin( methods: route: window.route ) ``` 它的工作原理

【参考方案1】：

如果您不使用 Blade，或者不想使用 @routes 指令，Ziggy 提供了一个 artisan 命令来将其配置和路由输出到文件：php artisan ziggy:generate

import route from 'ziggy';
import  Ziggy  from './ziggy';

Vue.mixin(
    methods: 
        route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config),
    ,
);

您可以选择创建一个 webpack 别名，以便更轻松地导入 Ziggy 的核心源文件

// webpack.mix.js

// Mix v6
const path = require('path');

mix.alias(
    ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
);

// Mix v5
const path = require('path');

mix.webpackConfig(
    resolve: 
        alias: 
            ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
        ,
    ,
);

这意味着你应该在这里改变路径'.ziggy'

import  Ziggy  from './ziggy';

【讨论】：

由于来自“ziggy”的导入路径，应用程序未安装；未捕获的类型错误：无法在 Object../node_modules/irc/lib/irc.js ( app.js:69342) 在 webpack_require (app.js:64) 在 Object../node_modules/ziggy/index.js (app.js:140181) 在 webpack_require (app.js:64) 在 Module../resources/js/app.js (app.js:141504) 在 webpack_require (app.js:64) 在 Object.0 (app.js :142081) 在 webpack_require (app.js:64)

您是否更改了这一行的路径？从'./ziggy'导入 Ziggy ；还是为 webpack 别名添加？

不，没有任何改变，我照原样复制上面的答案/小便文档。

我改了答案，请检查

【参考方案2】：

这里是 Ziggy 的维护者。 FightInGlory's answer 是正确的。

运行php artisan ziggy:generate。

然后，在您的webpack.mix.js 文件中：

const path = require('path');

// Mix v6
mix.alias(
    ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
);

// Or, Mix v5
mix.webpackConfig(
    resolve: 
        alias: 
            ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
        ,
    ,
);

然后，在您要使用 Ziggy 的文件中：

import route from 'ziggy';
// Change './ziggy' to the relative path to the file generated above, usually resources/js/ziggy.js
import  Ziggy  from './ziggy';

// ...

route('posts.show', 1, undefined, Ziggy);

如果您使用的是 Vue，创建一个全局 mixin 会很有帮助，这样您就不需要每次都将 Ziggy 作为第四个参数传入。有一个如何设置的示例in the docs。

如果这仍然不起作用，请随时提交问题并详细说明您的设置！

【讨论】：

我正在创建问题，仅供参考，详细信息已添加到问题中。

@bakerkretzmar 我不断收到“TypeError：this.route 不是函数”。有什么建议吗？

TypeError: Cannot call a class as a function 也是我不断遇到的另一个错误。我做错了什么？

@oluwatyson 对于TypeError，请确保您使用Vue.mixin( methods: route ) 之类的mixin 在所有Vue 组件中提供路由功能。您使用的是 Ziggy v1 吗？随时在 repo 中提出问题，我们可以仔细查看！ github.com/tighten/ziggy/issues