I'm learning Vue (on TS) and it seems awesome till this point. At the moment I learn about Vue routing, and have a question which I struggle to find a beautiful answer to.
Let's say, I have a parent route, named User, which gets userId as a param. I also have subpages for this route, which are called Profile and Settings respectively, and are being set in the User's children array:
routes: [
{
component: User,
name: 'User'
path: '/user/:userId',
children: [
{
component: Profile,
name: 'Profile',
path: 'profile',
},
{
component: Settings,
path: 'settings',
name: 'Settings'
},
],
}
]
It's pretty cool that I can redirect from User component to Profile or Settings as simple as
public redirectToProfile() {
this.$router.push({ name: 'Profile'});
}
But my question is - may I redirect to user's profile from outside of the User component the same way, without concatenating the path string like
public redirectToProfile() {
this.$router.push({ path: 'user/' + userId + '/profile'});
}
?
I think you can simply do it by passing params as well:
public redirectToProfile(id: string) {
this.$router.push({ name: 'Profile', params: {userId:id}});
}
Related
I Have 3 apps : root-config (single-spa), navbar-app ( port 4201 angular 12 ) angular-app (port 4202 angular 12 )
My root-config app (localhost:9000) has root-config.ts
registerApplication({
name: "#org1/myNavbarApp",
app: () => System.import("#org1/myNavbarApp"),
activeWhen: ["/"],
});
registerApplication({
name: "#org1/myAngularApp",
app: () => System.import("#org1/myAngularApp"),
activeWhen: ['/angular']
});
my myNavbarApp has app-routing.module.ts
const routes: Routes = [
{
path: 'login', component: LoginComponent,
}, {
path: 'menu',
component: MenuComponent,
},
{path: '**', component: EmptyRouteComponent}, // <-- will display angular app but will not
leave <mat-toolbar> in view from myNavBarApp ( only if i stay in localhost:4200/menu
and do refresh -> angular app default view displays under <mat-toolbar> of
myNavBarApp ( as expected behavior )
// {path: '**', redirectTo: 'login'}, // <-- renders default "login.component" on first load
of localhost:9000 (exactly what i need) but will cause next issue:
after navigateToUrl('angular') is done - ```login.component``` angular app content
are visible in the same page - ( not expected behavior )
];
const config: ExtraOptions = {
useHash: false,
enableTracing: false,
relativeLinkResolution: 'legacy',
};
#NgModule({
imports: [RouterModule.forRoot(routes, config)],
exports: [RouterModule],
providers: [{provide: APP_BASE_HREF, useValue: '/'}]
})
export class AppRoutingModule {
}
NavBarApp has menu.component.html includes next:
<mat-toolbar color="warn" class="toolbar">
<mat-button-toggle-group class="menu">
<mat-button-toggle (click)="singleSpaNavigateUrl('angular')" value="angular">Angular App</mat-button-toggle>
</mat-button-toggle-group>
</mat-toolbar>
and menu.component.ts includes next :
import {getAppNames, navigateToUrl, getMountedApps} from "single-spa";
public singleSpaNavigateUrl(url: string) {
console.log('appNames', getAppNames()); <-- IS ALWAYS EMPTY ARRAY , Why ?
console.log('mountedAppNames', getMountedApps()); <-- IS ALWAYS EMPTY ARRAY , Why ?
navigateToUrl('/'+ url); // <-- navigates to /angular
}
How to achieve myNavBarApp menu.component will stay visible in all child apps after login / or when is needed ?
How to achieve login.component as default , when myNavBarApp is loaded from root-config app in browser ( without entering "/login" manually after that)
Single spa documentation says: single-spa Layout Engine is optional at this time but is recommended if you foresee utilizing server side rendering .. So i do not have server rendering ...thats why i do not implement layouts , and want to know how it possible to do without it ?
Why getAppNames() and getMountedApps() returns always empty array ?
I am working in a B2B Spartacus project and we are currently implementing the MyCompany User/Unit management. The Spartacus implementation is a little to complex for our use-case so we are developing a custom solution based on it.
The original implementation features a CMS-Page for users (e.g.: https://spartacus-demo.eastus.cloudapp.azure.com:444/powertools-spa/en/USD/organization/users) and then Angular child routes for the user details (e.g.: /organization/users/7a95e933-364c-4c8d-81cd-4f290df0faf1)
I tried to replicate the child route implementation following the Spartacus documentation.
I created a parent (RightsManagementUser) and child (RightsManagementUserDetails) component.
<p>rights-management-user works!</p>
<a
class="btn btn-primary"
[routerLink]="{
cxRoute: 'orgUserDetails',
params: { customerId: '9e26d9fb-14eb-4ec6-9697-3fa53302245c' }
} | cxUrl"
>Go to User Details</a
>
<router-outlet></router-outlet>
Following the Spartacus Documentation, I provided a Spartacus and an Angular routing config
export const userRoutingConfig: RoutingConfig = {
routing: {
routes: {
orgUser: {
paths: ['organization/users'],
},
orgUserDetails: {
paths: ['organization/users/:userCode'],
paramsMapping: {
userCode: 'customerId',
},
},
},
},
};
RouterModule.forChild([
{
path: null,
component: PageLayoutComponent,
canActivate: [CmsPageGuard],
data: { cxRoute: 'orgUser' },
children: [
{
path: null,
component: RightsManagementUserDetailsComponent,
data: { cxRoute: 'orgUserDetails' }
},
],
},
]),
I also tried following the documentation for Adding Angular Child Routes for a Content Page
and added the child route to the cms config.
RightsManagementUserComponent: {
component: RightsManagementUserComponent,
childRoutes: [
{
path: ':userCode',
component: RightsManagementUserDetailsComponent,
},
],
},
This all wasn't enough, when clicking the button, the CMSPageGuard tries to load the CMS page for /organization/users/7a95e933-364c-4c8d-81cd-4f290df0faf1 instead of activating the child route.
I then tried to go the Angular way and defined the child route without using cxRoute:
children: [
{
path: ':userCode',
component: PflRightsManagementUserDetailsComponent,
},
],
At first I was happy, since the child route actually activated:
But then I realized that when I do a browser refresh Spartacus again tries to access the CMS-Page instead of activating the route.
Can someone please help me out and point me to the right way to use child routes in Spartacus?
If you would like to use split view, you can define your route in this way #customizing-routes, then clone whole cms configuration for organization feature and personalize childs #customizing-cms-components.
It could looks like:
const yourConfig = { ...userCmsConfig.cmsComponents.ManageUsersListComponent };
(yourConfig.childRoutes as CmsComponentChildRoutesConfig).children[1].component = RightsManagementUserDetailsComponent;
and include in your module
imports: [
// ...
B2bStorefrontModule.withConfig({
// ...
cmsComponents: {
ManageUsersListComponent: yourConfig,
},
},
// ...
I'd like to redirect from /my-account to /hr/moj-racun using nuxt i18n (because Croatian is the default language, and the mapping between my-account and moj-racun exists).
Instead it redirects to /hr/my-account.
The page folder inside my nuxt app folder is named 'my-account', and this is my current setup:
(I've set the alwaysRedirect, but it takes the entered url and prepends the language prefix, but it does not translate it by the given mapping)
[
'nuxt-i18n',
{
locales: [
{
name: 'Hrvatski',
code: 'hr',
iso: 'hr-HR',
file: 'hr.js'
},
{
name: 'English',
code: 'en',
iso: 'en-US',
file: 'en.js'
}
],
langDir: 'locales/',
strategy: 'prefix',
defaultLocale: 'hr',
lazy: true,
detectBrowserLanguage: false
}
]
Edit, this is my-account page specific nuxt-i18n setup:
export default {
nuxtI18n: {
paths: {
en: '/my-account',
hr: '/moj-racun'
}
}
}
If I go to the page like http://example.com/my-account it gets redirected to http://example.com/**hr**/my-account, without translation.
That is because your default locale is set to hr, If you want to redirect and switch language and translate data use this tag:
<nuxt-link
v-for="locale in availableLocales"
:key="locale.code"
:to="switchLocalePath(locale.code)">{{ locale.name }}</nuxt-link>
you can visit this page:
https://i18n.nuxtjs.org/lang-switcher
so we're attempting to move our project from Ionic 3 to Ionic 4. To begin we started a basic tabs app: ionic start myApp tabs
I made two pages:
ionic generate page userList
ionic generate page userDetailed
I want two different tabs to have the ability to navigate to "UserListPage".
So I added it to the "tab1" & "tab2" router children:
tabs.router.module.ts
{
path: 'tab1',
children: [
{
path: '',
loadChildren: '../tab1/tab1.module#Tab1PageModule'
},
{
path: 'user-list',
loadChildren: './user-list/user-list.module#UserListPageModule'
}
]
}
Now I want the UserListPage to be able to navigate to the "UserDetailedPage".
I tried adding user-detailed as a path onto the UserListPageModule like so:
user-list.module.ts
const routes: Routes = [
{
path: '',
component: UserListPage,
children: [
{
path: 'user-detailed',
loadChildren: '../user-detailed/user-detailed.module#UserDetailedPageModule'
}
]
}
];
Now when I'm on tab1 & click a button to go to the list page, it works.
However when I click a button to go from list page to the detailed page, it changes the URL but does not display the page.
Any ideas what I'm doing wrong?
Your detailed page will be "user-list/user-detailed", your subroutes like user-detailed will be appended to the current route of user-list.
What are the best practices of creating an authentication system for angular 2 SPA. Is there any built-in Angular2 modules to handle this?
The core thing you need is a guard to prevent routing to pages that require authentication. Thoughtram has a great article on guards and Jason Watmore has a brilliant post showing a full authentication mechanism using a guard and JSON Web Tokens.
Whether you use JWT (and there are reasons not to) or sessions (and there are reasons not to), it all comes down to the guard.
You write a guard like this:
#Injectable()
export class AuthGuard implements CanActivate {
constructor (private router: Router) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (isTheUserSignedIn()) {
return true;
}
// If not signed in, navigate to the login page and store the return URL
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
return false;
}
}
And then, wherever you configure the routes for your app module, you need to tell the route to use your guard:
const appRoutes: Routes = [
// Protect the Home route using the guard
{ path: '', component: HomeComponent, canActivate: [AuthGuard] },
// Don't protect the login and register pages
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
// Don't protect pages that don't need protecting
{ path: 'some-unprotected-page', component: UnprotectedPageComponent },
// Default redirect
{ path: '**', redirectTo: '' }
];