Question

问题：

当我打开应用程序时出现问题，它仅显示登录2秒钟，并且重定向到首页而不登录。我需要先注销，然后输入用户名和密码才能转到主页。

我该如何解决。

预期：

打开应用程序时，它会显示登录页面，而无需重定向到首页而不登录。

Open apps -> shows login page -> login by username & password -> homepage(if success)

我尝试了许多方法，例如设置默认页面if else condition时设置initializeApps，但此方法不起作用。

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  rootPage:any = 'LoginPage';
  users = [];
  stafId:any;
  full_name :any;
  avatar:any;
  email:any;
  user_department:any;
  subscription: Subscription;
  //const LAST_RELOAD_KEY = 'lastAppReload';
  //mySubscription: any;


  constructor(
    private navCtrl: NavController,
    private platform: Platform,
    private alertCtrl: AlertController,
    private splashScreen: SplashScreen,
    private auth: AuthService,
    private menuCtrl: MenuController,
    private statusBar: StatusBar,
    public sqlite : SQLite,
    public data:DataService,
    private router:  Router,
  ) {
    this.initializeApp();


    this.platform.backButton.subscribe(async () => {
      navigator['app'].exitApp();   
});

  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();

    });
  }

login.ts

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  constructor(private menuCtrl: MenuController,
    private auth: AuthService,
    public events: Events,
    private router: Router
  ) {
    this.menuCtrl.enable(false);
  }

  /*createUser(user) {
  console.log('User created!')
  this.events.publish('user:created', user, Date.now());
}*/

  submit(form) {
    this.auth.login(form.value);
  }

  ngOnInit() {
  }

}

login.html

<ion-content class="bg-image">

  <div class="header">
    <div class="logo"><img src="/assets/imgs/logo2.png"></div>

  </div>

<div padding>
   <form class="content" #form="ngForm" (ngSubmit)="submit(form)">
    <ion-grid>
      <ion-row color="primary" justify-content-center>
        <ion-col align-self-center size-md="10" size-lg="15" size-xs="11">
          <div class="login-detail">
            <ion-item class="username" color="transparent">
              <ion-input name="username" type="text" placeholder="Nama Pengguna" ngModel required></ion-input>
            </ion-item>
            <ion-item class="password" color="transparent">
              <ion-input name="password" type="password" placeholder="Kata Laluan" ngModel required></ion-input>
            </ion-item>

            <div padding>
              <button class="login" type="submit" expand="block">LOG MASUK</button>
            </div>

          </div>

        </ion-col>
      </ion-row>
      <ion-row>

      </ion-row>
    </ion-grid>
  </form>

</div>
<ion-content/>

app-routing.module

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import {AuthGuard} from './guards/auth.guard';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  { 
    path: 'login', 
    loadChildren: './authentication/login/login.module#LoginPageModule'
  },
  {
    path: 'home',
    loadChildren: './home/home.module#HomePageModule',
    canActivate: [AuthGuard]
  },
  { 
    path: 'profile', 
    loadChildren: './profile/profile.module#ProfilePageModule',
    canActivate: [AuthGuard] 
  },


];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Answer 1

使用路线守卫。

CanActivate：似乎可以通过当前的观察结果解决您的问题。

请上传您的文件。

Answer 2

您好，您必须检查如何管理应用程序中的登录和注销状态就像您应该检查是否通过user_access_token登录或是否未登录才能通过访问者令牌然后，如果您按照wa的方式进行管理，则必须确定该用户是否已登录如果用户登录，则将user_access_token保存在一个变量中，并检查

之类的条件

userLogin = localStorage.getItem('user_access_token') !== null;

  if (this.userLogin){
              /* path that you want to redirect
            } else if {
             /* path that you want to redirect in case logout
            }

这是一种有很多方法来管理这些东西的方法

如何解决问题而无需登录重定向到主页

2 个答案: