joer80 Posted June 19, 2020 Share Posted June 19, 2020 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! 1 Link to comment Share on other sites More sharing options...
zoeck Posted June 20, 2020 Share Posted June 20, 2020 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/ 4 Link to comment Share on other sites More sharing options...
flydev Posted June 20, 2020 Share Posted June 20, 2020 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) }) }) }, 6 Link to comment Share on other sites More sharing options...
dotnetic Posted June 20, 2020 Share Posted June 20, 2020 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. 5 1 Link to comment Share on other sites More sharing options...
joer80 Posted June 20, 2020 Author Share Posted June 20, 2020 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? Link to comment Share on other sites More sharing options...
flydev Posted June 20, 2020 Share Posted June 20, 2020 Do you have withCredentials: true in your app config or in your request ? Without it, cookies are not saved. 1 1 Link to comment Share on other sites More sharing options...
joer80 Posted June 24, 2020 Author Share Posted June 24, 2020 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 More sharing options...
teppo Posted June 24, 2020 Share Posted June 24, 2020 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 ? 5 Link to comment Share on other sites More sharing options...
flydev Posted June 24, 2020 Share Posted June 24, 2020 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 ? 1 Link to comment Share on other sites More sharing options...
joer80 Posted June 24, 2020 Author Share Posted June 24, 2020 So setting it manually with axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; worked! Thanks for all the help guys! Link to comment Share on other sites More sharing options...
Recommended Posts