node.js - AdonisJS - 无法调用函数 csrfField

Question

当我在边缘模板中使用 {{ csrfField() }} 时，出现错误

Cannot call function csrfField from user/payments/pay/unpaidHours.edge view

这是我的观点

<div class="p-3 border-2 border-blue-light rounded shadow overflow-x-scroll">
  <div>

    <div class="text-lg text-blue font-semibold mb-3">Unpaid hours <span class="text-sm text-blue-light">Payment Terms {{envGet('invoice_payment_terms')}} days</span></div>
    <div class="flex mb-2 pb-2 border-b-2 border-blue-lighter">
      <div class="w-1/5 font-semibold">Select</div>
      <div class="w-1/5 font-semibold">Flight Date</div>
      <div class="w-1/5 font-semibold">Engine Time</div>
      <div class="w-1/5 font-semibold">Price</div>
      <div class="w-1/5 font-semibold">Due Days</div>
    </div>

    <form action="/user/invoices/addhours" method="POST">

    @each(log in unpaidHours)
    <div class="text-sm lg:text-base flex p-2 border-b-2 border-grey-lighter {{invoiceDays(log.flight_start)<=0?'bg-red-light rounded text-white':''}}">
        <div class="w-1/5"><input type="checkbox" name="logs[{{log.id}}]"></div>
        <div class="w-1/5">{{moment(log.flight_start).format("YYYY-MM-DD")}}</div>
        <div class="w-1/5">{{hoursAndMinutes(log.engine_minutes)}} @ £{{log.cost_per_hour.toFixed(2)}} ph</div>
        <div class="w-1/5">£{{flyingHourPrice(log.engine_minutes, log.cost_per_hour)}}</div>
        <div class="w-1/5 text-sm">{{paymentDueDate(log.flight_start)}} ({{invoiceDays(log.flight_start)}} days)</div>
      </div>
    @else
    <div class="text-green p-3 font-semibold">Hurray, you have no unpaid hours!</div>
    @endeach
    @if(unpaidHours[0].id)
    <div>
      <button type="submit" class="mt-3 border-2 border-blue-dark bg-blue hover:bg-blue-light p-1 text-white rounded shadow" title="Create invoice from selected log hours">Create Invoice</button>
    </div>
    @endif
    {{ csrfField() }}
    </form>
  </div>
</div>

这是我的 Controller 功能

async index({ request, response, view, auth }) {
    var user = await auth.getUser()
    var paidInvoices = await Invoice
      .query()
      .where('user_id', user.id)
      .has('payment')
      .with('payment')
      .withCount('invoiceLines')
      .fetch()
    var unpaidInvoices =
      await Invoice
        .query()
        .where('user_id', user.id)
        .doesntHave('payment')
        .withCount('invoiceLines')
        .fetch()

    var unpaidHours = await Flyinghours
      .query()
      .where('user_id', user.id)
      .doesntHave('invoiceLine.invoice.payment')
      .orderBy('flight_start')
      .fetch()

    return view.render('user.payments.index', { unpaidHours: unpaidHours.toJSON(), unpaidInvoices: unpaidInvoices.toJSON(), paidInvoices: paidInvoices.toJSON() })
  }

Sheild 已安装并配置为提供程序

const providers = [
  '@adonisjs/framework/providers/AppProvider',
  '@adonisjs/framework/providers/ViewProvider',
  '@adonisjs/lucid/providers/LucidProvider',
  '@adonisjs/bodyparser/providers/BodyParserProvider',
  '@adonisjs/cors/providers/CorsProvider',
  '@adonisjs/shield/providers/ShieldProvider',
  '@adonisjs/session/providers/SessionProvider',
  '@adonisjs/auth/providers/AuthProvider',
  '@adonisjs/validator/providers/ValidatorProvider'
]

这是我的 kernal.js 文件

'use strict'

/** @type {import('@adonisjs/framework/src/Server')} */
const Server = use('Server')

/*
|--------------------------------------------------------------------------
| Global Middleware
|--------------------------------------------------------------------------
|
| Global middleware are executed on each http request only when the routes
| match.
|
*/
const globalMiddleware = [
  'Adonis/Middleware/BodyParser',
  'Adonis/Middleware/Session',
  'Adonis/Middleware/Shield',
  'Adonis/Middleware/AuthInit',
  'App/Middleware/ConvertEmptyStringsToNull',
]

/*
|--------------------------------------------------------------------------
| Named Middleware
|--------------------------------------------------------------------------
|
| Named middleware is key/value object to conditionally add middleware on
| specific routes or group of routes.
|
| // define
| {
|   auth: 'Adonis/Middleware/Auth'
| }
|
| // use
| Route.get().middleware('auth')
|
*/
const namedMiddleware = {
  auth: 'Adonis/Middleware/Auth',
  guest: 'Adonis/Middleware/AllowGuestOnly'
}

/*
|--------------------------------------------------------------------------
| Server Middleware
|--------------------------------------------------------------------------
|
| Server level middleware are executed even when route for a given URL is
| not registered. Features like `static assets` and `cors` needs better
| control over request lifecycle.
|
*/
const serverMiddleware = [
  'Adonis/Middleware/Static',
  'Adonis/Middleware/Cors'
]

Server
  .registerGlobal(globalMiddleware)
  .registerNamed(namedMiddleware)
  .use(serverMiddleware)

这是我的shield.js 文件

'use strict'

module.exports = {
  /*
  |--------------------------------------------------------------------------
  | Content Security Policy
  |--------------------------------------------------------------------------
  |
  | Content security policy filters out the origins not allowed to execute
  | and load resources like scripts, styles and fonts. There are wide
  | variety of options to choose from.
  */
  csp: {
    /*
    |--------------------------------------------------------------------------
    | Directives
    |--------------------------------------------------------------------------
    |
    | All directives are defined in camelCase and here is the list of
    | available directives and their possible values.
    |
    | https://content-security-policy.com
    |
    | @example
    | directives: {
    |   defaultSrc: ['self', '@nonce', 'cdnjs.cloudflare.com']
    | }
    |
    */
    directives: {
    },
    /*
    |--------------------------------------------------------------------------
    | Report only
    |--------------------------------------------------------------------------
    |
    | Setting `reportOnly=true` will not block the scripts from running and
    | instead report them to a URL.
    |
    */
    reportOnly: false,
    /*
    |--------------------------------------------------------------------------
    | Set all headers
    |--------------------------------------------------------------------------
    |
    | Headers staring with `X` have been depreciated, since all major browsers
    | supports the standard CSP header. So its better to disable deperciated
    | headers, unless you want them to be set.
    |
    */
    setAllHeaders: false,

    /*
    |--------------------------------------------------------------------------
    | Disable on android
    |--------------------------------------------------------------------------
    |
    | Certain versions of android are buggy with CSP policy. So you can set
    | this value to true, to disable it for Android versions with buggy
    | behavior.
    |
    | Here is an issue reported on a different package, but helpful to read
    | if you want to know the behavior. https://github.com/helmetjs/helmet/pull/82
    |
    */
    disableAndroid: true
  },

  /*
  |--------------------------------------------------------------------------
  | X-XSS-Protection
  |--------------------------------------------------------------------------
  |
  | X-XSS Protection saves applications from XSS attacks. It is adopted
  | by IE and later followed by some other browsers.
  |
  | Learn more at https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-XSS-Protection
  |
  */
  xss: {
    enabled: true,
    enableOnOldIE: false
  },

  /*
  |--------------------------------------------------------------------------
  | Iframe Options
  |--------------------------------------------------------------------------
  |
  | xframe defines whether or not your website can be embedded inside an
  | iframe. Choose from one of the following options.
  | @available options
  | DENY, SAMEORIGIN, ALLOW-FROM http://example.com
  |
  | Learn more at https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
  */
  xframe: 'DENY',

  /*
  |--------------------------------------------------------------------------
  | No Sniff
  |--------------------------------------------------------------------------
  |
  | Browsers have a habit of sniffing content-type of a response. Which means
  | files with .txt extension containing Javascript code will be executed as
  | Javascript. You can disable this behavior by setting nosniff to false.
  |
  | Learn more at https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
  |
  */
  nosniff: true,

  /*
  |--------------------------------------------------------------------------
  | No Open
  |--------------------------------------------------------------------------
  |
  | IE users can execute webpages in the context of your website, which is
  | a serious security risk. Below option will manage this for you.
  |
  */
  noopen: true,

  /*
  |--------------------------------------------------------------------------
  | CSRF Protection
  |--------------------------------------------------------------------------
  |
  | CSRF Protection adds another layer of security by making sure, actionable
  | routes does have a valid token to execute an action.
  |
  */
  csrf: {
    enable: true,
    methods: ['POST', 'PUT', 'DELETE'],
    filterUris: [],
    cookieOptions: {
      httpOnly: false,
      sameSite: true,
      path: '/',
      maxAge: 7200
    }
  }
}

Answer 1

我解决了这个问题。我试图在组件中使用 {{ csrfField() }} ，但看起来该函数只能直接从 Controller 调用的边缘文件中使用，所以我只是传递了值像这样进入我的组件。

@!component('user.payments.pay.unpaidHours', unpaidHours=unpaidHours, csrf=csrfField())

然后在我的组件中，我使用了传入的值。

<form>
...
{{csrf}}
...
</form>