Flow: backend sends o-auth link to Vue, user clicks on link which directs to stripe's form, after completion of the form it directs user to a URL I have specified.
I have a vue client app that I want to use stripe connect with. From my backend app, I am sending a [o-auth link][1] where it will let users fill out their Stripe information and upon completion, it will redirect me to a URL I specify in Stripe settings(http://localhost:8080/test and this is valid in test mode).
The problem I am facing is that even though the link is correct, vue won't redirect to test page and stay on the current page. test page renders when I redirect it via <router-view></router-view> in the template. I do have my router configured properly so I don't why it doesn't go to the redirect link and render that page.
my router setup:
routes: [
{
path: '/',
name: 'mainContent',
component: MainContent
},
{
path: '/test',
name: 'test',
component: test
},
{
path: '/manage',
name: 'manage',
component: Manage,
meta: {
requiresAuth: true,
}
},
]
})
[1]: https://stripe.com/docs/connect/express-accounts
Related
I have a simple application with some pages that need to be protected if the connected user is not an administrator.
I use the nuxt/auth package to handle the authentication:
auth: {
strategies: {
local: {
scopeKey: 'roles',
token: {
property: 'access_token',
type: 'Bearer',
name: 'Authorization',
},
user: {
property: 'user',
},
endpoints: {
login: {url: '/api/auth/login', method: 'post'},
// logout: { url: '/api/auth/logout', method: 'post' },
user: {url: '/api/auth/me', method: 'get'}
}
},
},
redirect: {
login: '/',
logout: '/',
callback: '/housing',
home: '/home'
},
plugins: [
'~/plugins/auth.js',
]
},
This works well but I have trouble achieving my middleware.
So what I want is to redirect the users to the home page if they don't have the role ROLE_ADMIN
export default function ({app, $auth, $axios}) {
if (!$auth.user.roles.includes('ROLE_ADMIN')) {
console.log("unauthorized");
app.router.push(app.localePath('home'));
}
}
And I use the middleware on the page I want.
It works perfectly when for example the user is logged and goes to the administration page without refreshing the page.
But if they go and refresh the page or use the direct URL, instantly after being redirected to the home page by my middleware, nuxt/auth redirect again my user to the "unauthorized" page.
Why this behavior?
Sorry for the bad answer last time. Here is a new one.
In the case of a hard refresh or moving to an URL from the search bar (same thing), you lose all your state and your app is loaded from scratch once again. At this point, you will have all of your middlewares executed again.
Here is a quote from this documentation page
The middleware will be executed in series in this order:
nuxt.config.js (in the order within the file)
Matched layouts
Matched pages
So, you'll have your auth (#nuxt/auth) middleware executed once again, then you will have your own custom one executed. Now, if you do not persist the info of the user (the one successfully logged in before the hard refresh), the auth module will have no clue of who you are and hence prompt you for a login once again.
So, nothing abnormal here so far.
Here is a link to an answer on how to persist data through a hard refresh: https://stackoverflow.com/a/66872372/8816585
The simple answer is: disable the redirect for auth/nuxt login and handle it on your own
redirect: {
login: false,
logout: '/',
callback: '/housing',
home: '/home'
},
If you don't disable it, it always is going to redirect the page to home after login
I am currently building a module for a CMS (Joomla) - the frontend of this module is created with VUE 3 incl. Router. The prototype is already working and can be integrated into the CMS Module. Also the router works. If a link is clicked within the VUE app, the corresponding view is displayed. But if the user is now on a subpage of the VUE App and refreshes it (F5 / Ctrl + F5), the page is not found - i think because it exists only in the Vue Router.
To the URL structure:
domain.tld <-- This is where the Vue application is located.
domain.tld/list-:id/item-:id <-- This is the URL for an ITEM
Now I know that it doesn't work like that because the webserver tries to interpret the URL which it can't because parts of it are from VUE.
Is it possible to reconfigure the vue router to work with parameters instead of a "physical" structure?
from: "domain.tld/liste-:id/item-:id"
to: "domain.tld?liste=:id&item=:id"
i think this could solve the issue but i dont know...
Edit:
When i try to use this in the router it still works but has the same effect because yeah "appname" cannot be found by the server..
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/appname?playlist=:id',
name: 'PlaylistDetails',
component: PlaylistDetails,
props: true
},
{
path: '/appname?playlist=:id&video=:vid',
name: 'Player',
component: Player,
props:true
},
]
You can assign a controller to a wild-card, which always return you Vue app:
$router->addMap('/domain.tld/*', 'VueController');
Another approach would be using a # in your URL. Everything after your # will be ignored by the server.
Based on the information i've got from Roman i have changed the routes and added a 404 to the router which refers to home. The views are now been loaded as "url params".
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/#appname?playlist-:id',
name: 'PlaylistDetails',
component: PlaylistDetails,
props: true
},
{
path: '/#appname?playlist-:id&video=:vid',
name: 'Player',
component: Player,
props:true
},
{
// Match all paths vue2 Use * vue3 Use /:pathMatch(.*)* or /:pathMatch(.*) or /:catchAll(.*)
path: "/:pathMatch(.*)*",
name: "404",
component: Home
}
]
If now someone tries to open a site via directlink he got redirected to home.
There might be a better solution but this works when you are using vue inside another PHP app where you are not able to configure the server.
additional info for 404:
https://qdmana.com/2020/12/20201223195804176T.html
It looks that Hotlinks (directly into a view) are not possible in my scenario.
I'm trying to load a Vue application on one of my sub pages. The site is an Episerver CMS site running ASP .NET on IIS.
When trying to load my Vue application on one of my sub pages, the url is changed to my start page url. The application works fine but since the url is changed, the application breaks on page refresh.
I'm using Vue router with hash mode (Hash mode is REQUIRED. When using history mode everything works fine).
Let say my application is loaded on the following url:
https://www.example.com/subpage/appstart/
My route configuration:
{
mode: 'hash',
base: '/',
[
{
path: '/',
name: 'home',
component: Home
},
{
path: '/page1',
name: 'page1',
component: Page
},
],
}
I've tried to use '/subpage/appstart/' as base but that does not seem to have any effect when using hash mode?
When navigating to my application:
https://www.example.com/subpage/appstart/
The url is changed to:
https://www.example.com/#/
The application works and so does the routing. Navigating to one of the pages will end up using the following url:
https://www.example.com/#/page1
How can I make the application work from the correct root url, so that my application Home stays on the correct url:
https://www.example.com/subpage/appstart/#/
https://www.example.com/subpage/appstart/#/page1
I have two different user.
One is Admin.Other one is User.I have to reuse the same LoginComponent for both User and Admin.
If i will hit URL http://localhost:4200/user , then login page will come where forgot password link will be there.
But i will hit URL http://localhost:4200/admin , then same login page will come where forgot password link will not be there.
In Routes i have given path like this.
const routes: Routes = [
{
path: 'user',
component: LoginComponent
},
{
path: 'admin',
component: LoginComponent
},
];
Can anyone please help me how can i have same login page with different content based on the URL hit.
I'm using the last version of vue-js and vue-auth whose documentation could be find here
By default vue-auth would redirect the user to /login if auth is true and if the user is not logged in.
So if I type http://example.com/mycomponent I will be redirect to /login.
Issue
After being loged, I'm redirect to /
Questions
What can I do so after being logged one is redirected to his initial request ?
If I type /mycomponent I'd like to be redirect to /mycomponent after login
Routes
{
path: '/mycomponent',
name: 'mycomponent',
component: mycomponent,
meta: { auth: true }
}
As stated on the documentation, you can call this.$auth.redirect(); on your login method to detect if the user was redirected to the login page.
You can then add the redirect option with a path.
var redirectObj = this.$auth.redirect();
this.$auth.login({
redirect: {
path: redirectObj ? redirectObj.from.path : '/'
},
});
You can also use a named route instead of the path.
this.$auth.login({
redirect: {
name: redirectObj ? redirectObj.from.name : 'default-named-route'
},
});