i'm creating spa with vuejs 2 using laravel passport with the same tutorial like in laracast and there is something weird happening, i first using this api route for my api calls from vue using axios
Route::middleware('auth:api')->get('/get_artikel', 'ArtikelController#get_artikel');
and it works fine. But when i change it to this
Route::resource('artikel', 'ArtikelController');
and add __construct into ArtikelController for auth
public function __construct()
{
$this->middleware('auth');
}
its return 401 unathorized, even thought when i open inspector in chrome and in application tab i see laravel_token, laravel_session and XSRF-TOKEN in there.
so what is happening here? i do some searching and everybody say it works fine in ngix server and there is no working solution for apache server (i have tried all of it)
for the auth, passport and everything else i follow laravel documentation.
Related
I had created a project before now and want to make API of it also I had a default laravel auth login module too now wants to generate sanctum auth for APIs but 2 auth running I guess.
pic shows working sanctum which I created for api
"account-settings", route in middleware not getting access but redirecting to "/login" page as shown in response, below I am providing api.php code too
In the pic this commit code // Route::group(['middleware' => ['auth', 'roles'],'roles' => ['admin','user','developer']], function () { is default laravel auth which have i commited in trying to make code working
I have 2 items set up in Auth0:
Application - Single Page Application
API - Custom API, machine to machine
I've followed the instruction in the link below to call the custom API:
https://auth0.com/docs/quickstart/spa/vuejs/02-calling-an-api
I've downloaded the sample with settings configured for both items mentioned above. The Vue app are able to log in correctly, and are able to call the external API by using the downloaded example codes (the external API, "backend", in the example code was written in Node JS).
However, when I change the backend to my Laravel/Lumen app which already set up for item no.2 (custom API), the Vue app received 401 unauthorized error. So, I copied the access token retrieved through Vue:
const accessToken = await this.$auth.getTokenSilently();
console.log(accessToken);
And try to call the Lumen backend with this access token - and it works perfectly fine!
Is there a setting somewhere that I might've missed to enable Vue & Lumen to work with Auth0?
p/s: The custom Lumen API was made following the instruction from:
https://auth0.com/blog/developing-restful-apis-with-lumen/
Ok it turns out I made a mistake in the axios part of the sample code. The sample is using get, while my API is using post. So I ended up sending the header in the wrong axios parameter. Hope this helps someone that encountered the same problem.
Where have I to authenticate in a SPA application using laravel and vuejs? I'm developing a normal web application with laravel and blade. Nothing out of ordinary, but, now, I'm trying to make a spa application using laravel and vuejs - backend separeted from frontend. Where would I have to authenticate in this example? In php routes or vuejs routes or both? My laravel app, only laravel, it works as expected, user permissions, user session, a normal application but in vuejs, how I can do the same verifications as well?
Without knowing you exact Laravel authentication setup I would just say you authenticate through ajax at the same route as you do in Laravel. In a fairly standard setup using axios I do it like this.
ajaxLogin(){
axios.post('/login',{
email: this.loginEmail,
password: this.loginPassword
}).then(function (res) {
this.getCrsfToken(); //refresh crsf token
}.bind(this));
}
Notice the getCrsfToken function here. This may be necessary if your SPA (page) is not being refreshed when logging out and back in. Like in the case of the session expiring while the browser window is open. You would use something like the following to refresh the crsf token if you are including it the standard Laravel way in the header.
In your Routes or Controller
Route::get('/getToken', function(){
return csrf_token();
})->middleware('auth');
In your Vue component
getCrsfToken(){
axios.get('/getToken')
.then(function(res){
// Refresh crsf token from session after login
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = res.data;
});
},
I am completely new to vuejs
I am working on a MEVN app. I setup a vuejs project with vue-cli , which runs on localhost:8080 , and an express server which runs on localhost:3000.
to send all the requests to my express server, I added proxy in vue's config/index.js which works perfectly.
Now i added passport google oauth in my app.
in server.js file i added
app.get('/auth/google',
passport.authenticate('google', {session : false, scope: ['openid email profile'],accessType: 'offline',prompt: 'consent'}))
and its callback route also
and in my vuejs code i added
Login with Google
on clicking Login with Google my app works perfectly in development mode but in PRODUCTION mode when i click Login instead of going to google consent screen for login it goes to <app-url>/auth/google with a blank page
please help me with this..
NOTE :
for production mode i did npm run build and then served the static file in server.js file (express) , and also used connect-history-api-fallback
UPDATE :
well connect-history-api-fallback was the problem but removing it results in broken vuejs routes as m using them in history mode
now what to do ?
Well just re-arranging my server.js did the trick
moved app.use(history()) below app.get('auth/google') and it worked
I posted about this a while ago but nobody responded and now I'm trying to give it another go.
https://laracasts.com/discuss/channels/testing/api-testing-in-travis-ci
Integration API testing with Travis-CI and Laravel HTTP issue
For some reason when I hit the endpoint of the API it always returns 404. There's some other tests in the Laravel AngularJS framework I'm using that work fine but they are just hitting basic routes such as;
public function testServeAngular()
{
$this->visit('/')
->see('ng-app');
}
public function testUnsupportedBrowserPage()
{
$this->visit('/unsupported-browser')
->see('update your browser')
->see('Internet Explorer');
}
These 2 tests work fine by the way.
I have tried running a web server as mentioned in another post I found on the forum but this does not work either.
https://laracasts.com/discuss/channels/testing/testing-api-calls-on-travis
I am using the Dingo API library on Laravel 5.1 for this project. It's also worth pointing out that all of my tests work locally.