ionic4+angular8+动态设置首页

我采用最原始最简单的方案，直接指定刷新后访问的实际URL，不动态操作angular路由。

访问URL示例：

index.html加入一段简单的判断脚本即可：

        <script>
            // 只处理未登录的状态，未登录时则刷新到指定的URL路由，即登录页面
            const token = localStorage.getItem('user-token');
            if (!token) {
                location.href = '#/user-login';
            }
        </script>

完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>IONIC-ANGULAR</title>

        <base href="./" />

        <meta
            name="viewport"
            content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
        />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />

        <!-- add to homescreen for ios -->
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />

        <script>
            // 只处理未登录的状态，未登录时则刷新到指定的URL路由
            const token = localStorage.getItem('token');
            if (!token) {
                location.href = '#/user-login';
            }
        </script>
    </head>

    <body>
        <app-root></app-root>
    </body>
</html>

我的angular路由配置如下（部分）：

app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
import { USER_ROUTES } from './pages/user/user-routes';
import { MALL_ROUTES } from './pages/mall/mall-routes';

export const TABS_ROUTES: Routes = [
    {
        path: '',
        loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule)
    }
];

const routes: Routes = [
    ...TABS_ROUTES,
    ...USER_ROUTES,
    ...MALL_ROUTES,
    { path: '**', component: PageNotFoundComponent }
];
@NgModule({
    imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, useHash: false })],
    exports: [RouterModule]
})
export class AppRoutingModule {}

tabs.router.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
    {
        path: 'tabs',
        component: TabsPage,
        children: [
            {
                path: 'mall',
                children: [
                    {
                        path: '',
                        loadChildren: () => import('../mall/mall/mall.module').then(m => m.MallPageModule)
                    }
                ]
            },
            .....................
            {
                path: '',
                redirectTo: '/tabs/mall',
                pathMatch: 'full'
            }
        ]
    },
    {
        path: '',
        redirectTo: '/tabs/mall',
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class TabsPageRoutingModule {}

user-routes.ts：

import { Routes } from '@angular/router';

export const USER_ROUTES: Routes = [
    { path: 'user-login', loadChildren: './pages/user/user-login/user-login.module#UserLoginPageModule' },    
];

上面这种方式太过简单粗暴，慎用。

操作angular路由应该也不麻烦，动态设置路由还没尝试过。

还可以在app.component.ts组件中，调用路由方法进行页面跳转（写在首页里面体验可能不太好）：

/* Last updated in 20200226 */
import { Component } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { AppServiceProvider } from './providers/app-service/app-service';

.............

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss']
})
export class AppComponent {
    constructor(
        private router: Router,
        private appService: AppServiceProvider,
    ) {
        // 判断是否登录，未登录则push到登录页面
        const token = localStorage.getItem('user-token');
        if (!token) {
            this.appService.push('user-login');
        }
    }

.............

这种方式要注意返回的问题！

跳转方法定义：

    /**
     * 跳转
     * @param path 路由地址
     * @param params http://localhost:8100/test;id=222
     * @param queryParams  http://localhost:8100/test?from=tabs
     */
    push(path: string, params: any = {}, queryParams: any = {}) {
        const navigationExtras: NavigationExtras = {
            queryParams
        };
        this.router.navigate([path, params], navigationExtras);
    }

ty41232X32

发布了79 篇原创文章 · 获赞 40 · 访问量 8万+

私信关注

ionic4+angular8+动态设置首页

猜你喜欢