Jump to content

Front End Editing with Vue and Processwire


joer80
 Share

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
Link to comment
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 6
Link to comment
Share on other sites

  On 6/20/2020 at 7:31 AM, flydev ?? said:

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

Expand  

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
Link to comment
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);
                    });

 

Link to comment
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

Expand  

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
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...