Front End Editing with Vue and Processwire

[joer80]

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!

[zoeck]

Just check the user role ? 

https://processwire.com/docs/user-access/roles/

or change the permissions to your post page in the Admin Panel (or both!)

https://processwire.com/docs/user-access/permissions/

[flydev]

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)
            })
        })
      },

 

[dotnetic]

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.

[joer80]

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?

[flydev]

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

Without it, cookies are not saved.

[joer80]

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);
                    });

 

[teppo]

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 ?

[flydev]

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 ?

[joer80]

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

Thanks for all the help guys!