Sencha Touch history issue, when using routes and route filters - sencha-touch-2

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.

Related

Force user to a page after sign-in and user that already log-in before

I currently have a service authentication up and running (using jwt to auth).
I'm working on a quiz service that force user to create some required information and force them to take a quiz to understand how to use our tool.
Because lacking of Frontend exp, I'm wondering how this quiz service will integrate with the auth service
Right now, for Backend side during auth service I will give them back the permission in the token if I call the function to check if the user pass the test & have a profile created. Otherwise I give them back the token with permission = []
But for the Frontend side, what is the solution to re-direct use to Quiz page (after sign-in and what about user that already log-in before)
check this documentation programatic navigation
once authenticated redirect the user back using [vue2 code]
this.$router.push({name:'Quiz',params:{id:this.$route.query.next})
In the authentication page you may pass the quiz link as next query parameter eg
example.com/login?next=< quizID >
Navigation guard documentation
You can use route guards to redirect unauthenticated users to the login page, do remember to pass the quiz id as a query parameter.
your guard will be similar to this
router.beforeEach((to, from, next) => {
if (to.name === 'Quiz' && !isAuthenticated) next({ name: 'Login', query: { next: to.params.quizID }})
else next()
})
This was assuming you have set your routes has a route named Quiz and takes :id and a route named login, similar to this.
{
path: '/quiz/:id',
name: 'Quiz',
.....
},
{
path: '/login',
name: 'Login',
......
},
Alternatively, you could have set up a dialog box on the quiz page that handles authication.

Nuxt.js custom role middleware doesn't work when page refresh

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

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 });

Aurelia Redirection to the anonymous page or any other page with default access-token without going to login page....?

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'},