I have a laravel + vue app. the authentication is managed fully using laravel Auth and blades. Now I'm building a vue application inside the system. This vue app is integrated with vue-router and vuex. Im using Api controller for any http request from my vue aplication.
app.js
Vue.use(VueRouter);
global.router = new VueRouter({
base: window.location.pathname.replace(/^(\/c\/[^\/]+).*/i,'$1'),
routes: routes
});
new Vue({
el: '#spa',
render: h => h(App),
router,
store: store,
});
Everything else is working good except on how to pass Auth data from laravel to vue. And how to auto log out the user if user is logged out from the main laravel system. Is there any solution or workaround to this?
Thanks
Assuming session information is stored in a cookie and vue app is served on same domain as laravel app exposing login and API, it's available in frontend via document.cookie API. Since cookies are included in every request per default, you don't have to care about sending it along with your AJAX requests.
If vue application is not served on the same domain, you have to use token based approaches as described in API Authentication chapter of Laravel docs. In that case you also have to care about CORS.
Related
I'm having an application with 5 different sub-applications where they use multiple sub-domains under one main domain with vue2. Everything working with vue2 implementations. And I'm trying to implement auth UIs (its a separate vue3 project) with the below technologies
Vue 3.2
2.Vue router 4.1
3.Vite 3.0
4.Pinia 2.0
So my applications are like below with vue2
Auth app (localhost:3000)
Profile app (localhost:3001)
Dashboard app (localhost:3002)
At the moment I have implemented all the functionalities related to Auth app with vue3. But I'm having an issue with that. So initial applications will work as follow.
User gets authenticated via auth app and then redirect to Profile app
If the user clicks on the dashboard app link it will redirect the user back to auth app with redirect_uri so that when it redirects to auth app will check auth status and if the user is authenticated then the user will be redirected to the redirect_uri which comes with router query.
At the moment this is working with vue2. But it's not working with vue3.
How does it work with Vue3.
Send a get request to /sanctum/csrf-cookie and then send a post request with email and password.
After successful login redirect the user to the Profile app. (But app says unauthenticated for all requests and it will redirect back to auth app - 3000)
I use the below configurations
import axios from "axios";
const instance = axios.create({
withCredentials: true,
baseURL: import.meta.env.VITE_APP_API_URL,
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
});
If I use Vue 2 auth app then everything works as required.
IF I REFRESH THE PAGE AFTER LOGIN WITHOUT REDIRECTING THE USER TO PROFILE IT WILL SUCCESSFULLY GET THE CURRENT USER. BUT ASS SOON AS I REDIRECT USER TO PROFILE THEN IT SAYS Unauthenticated AND REDIRECT TO LOGIN. AT THIS MOMENT USER IS UNAUTHENTICATED AND NEEDS TO RE-LOGIN.
I have referred so many answers at Laracast and StackOverflow. But wasn't able to find the exact issue. Really appreciate any help on this one.
Thanks
I am working with vue and laravel application. I need to show component without user having to login. At the moment, to view the component(that has safety instructions), user have to login. But Now The component is needed outside meaning no login required to view that specific page. How can I achieve this in vue laravel application?
If your Vue app is under protection of 'auth' middleware, you won't be able to reach it before login. Where you need Vue component use web middleware. But to be able to fetch data by Vue component, you will still need a token protection like Sanctum.
I have laravel 8 backend app, serving as API for frontend using Vue 3
In my routes/api.php I have
Route::post('/teachers', [TeacherController::class, 'index'])->name('teachers');
This will return list of teachers to be used in VueJS.
How do I restrict so that only my VueJS app can access api/teachers ? I successfully hitting the api above using POSTMAN, which I expect it to be failed.
I have laravel sanctum installed, although i'm not so sure whether this is something sanctum can help with.
Thanks
I've created Vue SPA that consumes Laravel API for server-side operations, and each project lives in its separate folder.
Now, both projects are up and running and they are able to communicate to each other. I'm able to send HTTP requests using Axios from Vue app to Laravel API middleware routes.
I have hard-coded client secret into my Vue application and therefore everything is working fine. I can submit login credentials and receive an access token from the server, which I then store on my localStorage.
The following is a request method from Vue application
handleLoginForm () {
const postData = {
grant_type: 'password',
client_id: '2',
client_secret: 'MySecretFromTheDataBase',
username: this.login.email,
password: this.login.password
}
axios.post('oauth/token', postData)
.then(response => {
// some logic
})
}
The question is, how do I have to handle the client_id and client_secret from within the client app? I suspect that having a hard-coded secret pose great security risk.
Which authentication method I should use?
I am building a SPA website with Laravel for back-end and VueJS for front-end. And now I want to authenticate users in my website. So I used Laravel Passport for that. My question is that how should I keep user access token and refresh token in vue to make another requests for authentication required routes? Thanks in advance :)