Vue.js
{ path: '/authenticate/:id', component: authenticate },
URL- http://localhost:8080/authenticate/test.qwerty
Error - Cannot GET /authenticate/test.querty
If URL - http://localhost:8080/authenticate/test
It works fine.
If the endpoint has a period(.) then not able to access the route. How to resolve this issue?
Related
I have deployed a vuejs app on github-pages with okta authentication. On localhost (locally) when I click on a login button on my vuejs page it goes to Okta for authentication and then redirects to my localhost successfully.
Now I have deployed to github-pages and the redirection from Okta back to my github-pages does not work. I keep seeing the following error:
GET https://<MYUSERNAME>.github.io/vue-catalog-ui/implicit/callback?code=<REDACTED>&state=<REDACTED> 404
I guess Okta redirection does not work on Github-pages because locally I do this to run npm run serve which may do something additional like setting up a server?
The following is my Auth setup in my main.js file:
//const vueUrl = "http://localhost:8080"
const vueUrl = 'https://<MYUSERNAME>.github.io/vue-catalog-ui'
Vue.use(VueRouter)
console.log('issuer: ', process.env)
Vue.use(Auth, {
issuer: 'https://dev-<REDACTED>.okta.com/oauth2/default',
clientId: '<REDACTED>',
redirectUri: vueUrl + '/implicit/callback', // Handle the response from Okta and store the returned tokens.
scopes: ['openid', 'profile', 'email'],
pkce: true
})
vue.config.js:
publicPath: '/vue-catalog-ui/'
Any hints appreciated.
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
I am working on Nuxtjs application and I'm using router-module.
Static route is working however dynamic routing is not working. For example when I access url /users/123, it showing Not Found. here is my router file:
{
path: '/user/:id',
name: 'user',
component: user
}
I developed a CMS and vuejs App to configurate custom terminal in shops. after loading the initial CMS File from the server I want to add the "/" and "*" path to the routes. how can I do this. for some reasons I would like to have the router initialized before I load the content.
I thought I could add a route with:
Vue.router.routes.push({
path: "*",
redirect: this.getStartPageType() // gets the homepage from the store
})
I get always "Cannot read property 'push' of undefined".
How could I do this. is it possible to a a method to the routes.
when adding this to the routes,
{
path: "*",
redirect: () => {
store.getters.getAppStartPageType;
}
}
I got an error: fullpath not definded in
<router-view :key="$route.fullPath" v-if="loaded==true"/>
and when entering a wrong path into the bwoser url string then I got "invalid redirect option: undefined"
I have an external web site and vue app on the same domain. I want programmatically redirects a user from vue app to external web site with a full page reload.
Example
http://example.com --> vue + vue-router App
http://example.com/external-site --> external web site
In Vue 2.x, you can create a route that will go to an external URL by adding a route like this:
{
path: "/Stackoverflow",
component: Stackoverflow,
beforeEnter(to, from, next) {
window.location.href = "https://stackoverflow.com";
}
}
Activate using:
this.$router.push({ path: '/Stackoverflow' });
All you need is:
window.location.href = "http://example.com";