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 });
Related
In my application I have a page with params I'd like to redirect the user to a 'destination' page after they login. I can do a $router.push like this:
this.$router.push({
name: "foo",
params: {
title: "Hello",
message: "World!"
}
});
The user has just been logged in programatically at this point and I'd like the state of the root component to update so that, for example, the "Logout" button appears. I can refresh the page with this.$router.go() but then I'd need some logic to prevent infinite refreshes. I don't want to refresh from the 'destination' page because it's a component I use elsewhere. I don't think I can reload the window to that destination because I need to pass params.
Is there a way I can $router.push() with a reload, or refresh the App.vue component state without a reload?
I'm on the page: /foo and click on the button to redirect me to /bar.
But I have beforeEach route event which redirect me to /login. after I do login, I redirect to /bar.
When I on /bar I click on the back button I get to login page. instend I want to get the the last page which is /foo.
How can I do it? is there a way to redirect to login without add route to history record?
router.beforeEach((to, from, next) => {
if (!to.matched.some((record) => record.meta.auth)) { return next(); }
return next({
path: '/login',
});
});
Use replace instead of push when you redirect to the page after login (in the login component).
loginSuccessed() {
this.$router.replace(redirect);
}
Use route.replace insted of router.push. It acts like router.push, the only difference is that it navigates without pushing a new history entry, as its name suggests - it replaces the current entry.
succesffulyLoggedin() {
this.$router.replace({ name: 'dashboard' });
}
read docs here router replace
I have a problem when I use router.push('/') as the last step of a logout.
If I trigger the logout procedure from the same route that / redirects to, the router.beforeEach will not be triggered and therefore not redirect the user to the /login but still show the route that should only be visible to logged in users (which the user isn't any more at the end of the logout procedure).
{
path: '/',
redirect: 'foo'
},
{
path: '/foo',
name: 'foo',
component: Foo,
meta: {
requiresAuth: true
}
},
and
router.beforeEach((to, from, next) => {
...
if(to.requiresAuth && userLoggedIn == false)
next('/login')
...
So if I trigger the logout from any route other than /foo it works as expected but if I trigger it from /foo the user is not redirected to /login.
I guess that might possibly be intended behaviour to make the routing as efficient as possible but in this case it is definitely not what I want.
How do I ensure my beforeEach route guards will be evaluated on every router.push/replace?
The router.beforeEach guard seems to run only when it detects a change in navigation. Since the route is the same in your case, you'd have to force a navigation change by pushing a different route path before your intended one. Pushing an empty space beforehand works well. This is admittedly hacky.
For example:
<button #click="$router.push(' '); $router.push('/')">Logout</button>
demo
Create a /logout route which redirects to the / route.
Bonus: Display a nice message with "Successfully logged out" and redirect after a couple of seconds.
I developing a demo app which is having a login page., By default I am loading to that default page. But For some pages I want to go with the URL directly redirect to that page. But aurelia default loading to the login page. How can I redirect to the anonymous URL or some URL with my token directly without going to Login page.
Can anyone explain me or give a sample ?
You can use canActivate()
canActivate(params, routeConfig, navigationInstruction) {
//some check for token in params
if (hasToken) {
return new Redirect(`/someroute/${token}`);
}
// proceed and load login page
}
or you can use different routes like
{ route: 'login', moduleId: './pages/login'},
{ route: 'login/token/:token', moduleId: './pages/anonym'},
In Sencha Touch 2, I have a beforeFilter, before the routes.
When the user wants to visit a certain view, the "beforeFilter" acts first.
I use the filters for authentication check and other things.
I kept the example very simple, to highlight where I need help:
Ext.define("TestApp.controller.Router", {
extend: "Ext.app.Controller",
config: {
before: {
home: 'beforeFilter',
login: 'beforeFilter',
products: 'beforeFilter'
},
routes: {
'': 'home',
'home' : 'home',
'login' : 'login',
'products' : 'products',
'products/:id': 'product',
}
},
beforeFilter: function(action) {
// The before filter acts before the user gets to any of the routes.
// Check the user's authentication state.
// If the user wants to visit the "products" route and he ISNT't authenticated,
// Redirect the user to the login page.
this.redirectTo('login');
// else - go to the normal root.
action.resume();
},
home: function () {
// This and the functions bellow handle the display of the routes.
},
login: function () {
},
products: function () {
}
});
The problem.
User wants to view the products route but he isn't logged in.
The beforefilter steps in, and redirects the user to the login page.
Here is where I need help:
If the user is on the login page and clicks a button which triggers Sencha's history.back() event, the user gets redirected to the products page, AGAIN, the beforefilter steps in, and it redirects him back to the login view.
Basically, the history will no longer work.
To solve the problem, I would need a way to keep the products route from being logged into Sencha's history object when the user isn't authenticated.
Do you guys have other ideas?
I asked a more general question about this, but this one feel more documented to the issue in particular.
For views that you don't want to have history support, simply add / change the view without using redirectTo.
Straigh to viewport:
Ext.Viewport.add({xtype: 'myloginview'})
or with navigation view (in a controller):
this.getMyNavView().push({xtype: 'myloginview'})
this way the url doesn't change to #login, and doesn't add to the history stack.