Jump to content
joer80

Front End Editing with Vue and Processwire

Recommended Posts

I started a proof of concept using vue to do live front end edits to processwire fields and have a question.  

I successfully bound the text field to the vue variable and used axios to send the post to my processwire page /post/ on save, but how do I secure this post page so others can not post edits to this /posts/ page?

Thanks!

Screen Shot 2020-06-19 at 6.33.29 PM.png

  • Like 1

Share this post


Link to post
Share on other sites

Hi @joer80

In the top of the post.php file, you can write your logic to check which user is allowed to post or not xhr request.

 

Example :

<?php namespace ProcessWire;

// if the page is viewed wihtout ajax, return
if(!$config->ajax) return;
// if the user is a superuser, return
if($user->isSuperuser()) return;
// only editor can post request to this page
if(!$user->hasRole('editor')) return;
// other checks if needed, CORS check, Custom header check, etc

// rest of code - access granted
// ...

 

then, for example in your component , but anyway you already know how to do it :

    // example 
    editPage() {
        this.$store.dispatch('setEditPage', this.$route.path).then(() => {
          axios
            .post(config.apiEditPageURL)
            .then(response => {
              this.data = response.data
            })
            .catch(error => {
              this.errored = error
            })
            .finally(() => {
              this.$store.dispatch('loading', false)
            })
        })
      },

 

  • Like 5

Share this post


Link to post
Share on other sites
3 hours ago, flydev 👊🏻 said:

if($user->isSuperuser()) return; // only editor can post request to this page if(!$user->hasRole('editor')) return;

There is an alternative method in ProcessWire to determine if $page is editable by current user: https://processwire.com/api/ref/page-permissions/editable/

It returns true or false if the user is allowed to edit the page.

  • Like 5
  • Thanks 1

Share this post


Link to post
Share on other sites

So i was under the impression the axios  post doesnt have the superuser cookie just because I did. Are you saying it would if I did?

Share this post


Link to post
Share on other sites

Do you have withCredentials: true in your app config or in your request ? 

Without it, cookies are not saved.

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

So interestingly enough, my axios post by default has all of the cookies needed for the post to be done by the admin user, but it is not seen as an ajax request, so it will not continue if I force it to be ajax with

if(!$config->ajax) return;

This is how I am doing it.

methods: {
				processForm: function() { //event
					
					const self = this; //so .then can access outside this.
					
					axios.post('/post/', {
                      pageID: this.pageID,
					  text_heading: this.text_heading
                    })
					.then(function (response) {
												
						if(response.data == 'success'){
							UIkit.notification({
            				message: '<span uk-icon="icon: check"></span> Changes saved.',
            				status: 'success', /* primary, warning, danger */
            				pos: 'bottom-right',
            				timeout: 2500
        					});
						} else {
							UIkit.notification({
            				message: '<span uk-icon="icon: warning"></span> ' + response.data,
            				status: 'danger',
            				pos: 'bottom-right',
            				timeout: 2500
        					});
						}
						
												
  					})
                    .catch(function (error) {
                      console.log(error);
                    });

 

Share this post


Link to post
Share on other sites
Quote

but it is not seen as an ajax request, so it will not continue if I force it to be ajax with

AJAX request detection is based on the X-Requested-With header. You need to set its value to XMLHttpRequest:

// via default settings:
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

// or via config object when making the request:
axios.post('/post/', {
  pageID: this.pageID,
  text_heading: this.text_heading
}, {
  headers: {
    'X-Requested-With': 'XMLHttpRequest'
  }
})

Written in browser and untested, but that's the general idea anyway 🙂

  • Like 5

Share this post


Link to post
Share on other sites

What @teppo said, also, what is returning error or response ? Admin markup ? If yes, you might need to set the Content-Type header.

Can you post your request headers here ?

What is /post/ ?  Can we see a chunk code ?

  • Like 1

Share this post


Link to post
Share on other sites

So setting it manually with axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; worked!

Thanks for all the help guys!

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...