docs: 📝 example with PUT not protected

#36
Morgbn · Jul 17, 2024 · 0290ad6 · 0290ad6
1 parent 0f756fc
commit 0290ad6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
@@ -2,16 +2,19 @@
   <div>
     <h1>Test CSRF <small>with useCsrfFetch</small></h1>
     <p><small>or test <nuxt-link to="/test-fetch">with $csrfFetch</nuxt-link></small></p>
-    <button @click="testPost()">
+    <button @click="testFetch()">
       POST /test (without csrf header)
     </button>
-    <button @click="testPost(true)">
+    <button @click="testFetch(true)">
       POST /test (with csrf header)
     </button>
-    <button @click="testPost(false, '/nocsrf')">
-      POST /nocsrf (without csrf header)
+    <button @click="testFetch(false, '/test', 'PUT')">
+      PUT /test (without csrf header, method not protected <pre>methodsToProtect: ['POST']</pre>)
     </button>
-    <button @click="testPost(true, '/error')">
+    <button @click="testFetch(false, '/nocsrf')">
+      POST /nocsrf (without csrf header, route not protected <pre>routeRules: { '/api/nocsrf': { csurf: false } }</pre>)
+    </button>
+    <button @click="testFetch(true, '/error')">
       POST /error (throw an error one time in two)
     </button>
     <br>
@@ -21,7 +24,7 @@
       :style="{ color: msgColor }"
     >{{ msg }}</pre>
     <hr>
-    <h3>Result of <pre style="display: inline-block; background-color: lightgrey;">/api/data</pre>:</h3>
+    <h3>Result of <pre>/api/data</pre>:</h3>
     <pre>{{ preFetchedData }}</pre>
   </div>
 </template>
@@ -32,11 +35,11 @@ import { useCsrfFetch, useFetch } from '#imports'
 
 const msg = ref(null)
 const msgColor = ref('green')
-const testPost = async (withCsrf, url = '/test') => {
+const testFetch = async (withCsrf, url = '/test', method = 'POST') => {
   msg.value = null
   msgColor.value = 'green'
   const fetch = withCsrf ? useCsrfFetch : useFetch
-  const { data, error } = await fetch('/api' + url, { method: 'POST' })
+  const { data, error } = await fetch('/api' + url, { method })
   msg.value = data.value || error.value
   if (error.value) { msgColor.value = 'red' }
 }
@@ -45,3 +48,11 @@ const { data: preFetchedData } = useCsrfFetch('/api/data', { params: { d: 'speci
 // Need "addCsrfTokenToEventCtx" to be true in csurf config (in nuxt.config.js)
 // const { data: preFetchedData } = useCsrfFetch('/api/data', { method: 'post', body: { d: 'specific' } })
 </script>
+
+<style lang="css">
+pre {
+  display: inline-block;
+  background-color: lightgrey;
+  margin: 0;
+}
+</style>
diff --git a/playground/server/api/test.put.ts b/playground/server/api/test.put.ts
@@ -0,0 +1,2 @@
+import { defineEventHandler } from 'h3'
+export default defineEventHandler(() => 'Test put success')
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import { defineEventHandler } from 'h3'
		export default defineEventHandler(() => 'Test put success')