Vue.js IE 11 logout routing problems - vuejs2

I'm testing my Vue project's logout function and it works like a charm on Chrome and Firefox. On IE 11, navigating to:
localhost:8081/#/logout
causes a lot of issues. User is logged out but logout page keeps refreshing and refreshing.
Logout code in my router:
{
path: '/logout',
name: 'Logout',
component: Logout
},
Any tip how to solve this IE 11 issue?

Related

Vue application loaded on a sub page will have its URL updated to site start page

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

Handling routing in Vue with Strip Connect's redirect link

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

How to I route my app to admin app in single application?

How to route to the admin application in a single app. Which from localhost:8080 to localhost:8080/administration which will open up the new application component?
I have tried to use some routing js but the drawer of the previous application still appears when I close the Admin drawer.
import Home2 from './App2.vue'
{
path: '/',
name: 'Home',
component: Home
}, {
path: '/admin ',
name: 'Home',
component: Home2
}
I want to make it forward to the fresh new application whereas admin page. If have any suggestion please advice me.
it seems in the App.vue you have declared router-view and sidebars. Instead declare sidebar inside router-view children and use nested routing.

How to use same Login page for different user in Angular 6

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.

Aurelia cancel navigation in navigation strategy

I have a login route that will redirect the user to an external Open ID Connect login page. Once there, if the user clicks the back button, they hit the same route that redirected them, thus being redirected again. Is there a way to cancel Aurelia's navigation or prevent the current route from being remembered in the history?
config.mapRoute({
name: "login",
nav: false,
// If I exclude the module id, I get the desired behavior but errors are thrown from Aurelia.
moduleId: "components/login/login",
route: "login",
navigationStrategy: (instruction: NavigationInstruction) => {
// This promise constructs the redirect url then sets the window.location.href.
// Unfortunately, Aurelia seems to be finishing its business before the page is redirected because this login route is recorded in history.
return this.userManager.signinRedirect();
}
});
I know its been a while so you probably found an answer elsewhere, but you can try
router.navigate('new url', { replace: true });