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.
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
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
Basically my idea is to load home page , if user visits for first time and if user has already visited display the details of user.
There is no login for this app.Its like anonymous login.
Where to write the function like before Route ? on initial load itself it should go to correct page
I think you can do this with Route Guard beforeEnter method. For more information see https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard.
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// Do your logic here.
}
}
]
})
I want to match two URLs in my Vue app, /users, and /users/:id. For /users, it displays a table with a list of users, and /users/:id displays the profile page for that single user.
I know I can do it like this:
{
path: 'users',
name: 'View Users',
component: UserList
},
{
path: 'users/:id',
name: 'User Profile',
component: UserProfile
}
However, I automatically generate breadcrumbs from the route path. By doing it as above, the user profile page isn't shown as a subpage of the user list (e.g. it shows Home / User Profile rather than Home / View Users / User Profile).
I've tried it as follows:
{
path: 'users',
name: 'View Users',
component: UserList,
children: [
{
path: ':id',
name: 'User Profile',
component: UserProfile
}
]
}
This solves my breadcrumb issue, however as UserList doesn't have a <router-view> tag, all that is rendered is the same UserList view, rather than the profile view.
The docs aren't massively helpful (https://router.vuejs.org/en/essentials/nested-routes.html).
What's the best way to do this?
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.