Angular 角度：默认情况下如何显示登录页面_Angular

Angular 角度：默认情况下如何显示登录页面

angular

Angular 角度：默认情况下如何显示登录页面,angular,Angular,我正在开发springboot/angular（11.2.7版）应用程序。我想在启动时显示登录页面这是index.html页面 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Frontend</title> <base href="/"> &l

我正在开发springboot/angular（11.2.7版）应用程序。我想在启动时显示登录页面

这是index.html页面

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Frontend</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

这是app.module.ts文件

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LoginComponent } from './login/login.component'
import { AppComponent } from './app.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpsInterceptor } from './http.interceptor';
import {ReactiveFormsModule} from "@angular/forms";

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ReactiveFormsModule,
AppRoutingModule
  ],
  providers: [{ provide: HTTP_INTERCEPTORS, useClass: HttpsInterceptor, multi: true } ],
  bootstrap: [LoginComponent]
})
export class AppModule { }

这是批准模块

import { Routes, RouterModule } from '@angular/router';
import {LoginComponent} from "./login/login.component";
import {NgModule} from "@angular/core";


const routes: Routes = [
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  }
  ];

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

这是弹簧控制器

package com.example.commission.controllers;

import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.Collections;
import java.util.Map;

@RestController
// we allow localhost:4200 for testing purposes
@CrossOrigin(origins = "http://localhost:4200")
public class HelloController {

    @RequestMapping(value = "/message", produces = MediaType.APPLICATION_JSON_VALUE)
    public Map<String, String> index() {
        return Collections.singletonMap("message", "Greetings from Spring Boot!");
    }

}

和app.component.html

<div class="jumbotron">
  <div class="container">
    <div class="row">
      <div class="col-sm-6 offset-sm-3">
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>

出于增量目的，AuthGuard返回false并重定向到登录页面

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

//import { AuthenticationService } from '@app/_services';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(
    private router: Router
    //,private authenticationService: AuthenticationService
  ) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
/*    const currentUser = this.authenticationService.currentUserValue;
    if (currentUser) {
      // logged in so return true
      return true;
    }*/

    // not logged in so redirect to login page with the return url
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
    return false;
  }
}

我进步了

这是我项目的结构

- PorjectName
   - backend
       ......
       pom.xml
   - frontend
       .......
       pom.xml
   - pom.xml

当我从ProjectName运行mvn clean package，然后从frontend目录运行ng serve时，错误消失了。为什么?

以下是前端模块的pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <parent>
  <groupId>dev.xavier</groupId>
    <artifactId>java-angular-commission</artifactId>
    <version>0.1-SNAPSHOT</version>
  </parent>
  <modelVersion>4.0.0</modelVersion>
  <artifactId>frontend</artifactId>
  <packaging>jar</packaging>
  <dependencies>
    <dependency>
      <groupId>org.apache.maven.plugins</groupId>
      <artifactId>maven-clean-plugin</artifactId>
      <version>3.1.0</version>
      <type>maven-plugin</type>
    </dependency>
  </dependencies>
  <build>
    <plugins>
      <!-- clean the dist directory used by Angular -->
      <plugin>
        <artifactId>maven-clean-plugin</artifactId>
        <version>3.1.0</version>
        <configuration>
          <filesets>
            <fileset>
              <directory>dist</directory>
            </fileset>
          </filesets>
        </configuration>
      </plugin>

      <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>1.11.2</version>

        <executions>

          <!-- Install node and npm -->
          <execution>
            <id>Install Node and NPM</id>
            <goals>
              <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
              <nodeVersion>v14.16.0</nodeVersion>
            </configuration>
          </execution>

          <!-- clean install -->
          <execution>
            <id>npm install</id>
            <goals>
              <goal>npm</goal>
            </goals>
          </execution>

          <!-- code validation -->
     <!--     <execution>
            <id>npm run lint</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <phase>test</phase>
            <configuration>
              <arguments>run lint</arguments>
            </configuration>
          </execution>-->

          <!-- build app -->
          <execution>
            <id>npm run build</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>run build --prod</arguments>
            </configuration>
          </execution>

        </executions>
      </plugin>

    </plugins>

    <resources>
      <resource>
        <!-- we copy the content of the frontend directory in the final artifact -->
        <directory>dist/frontend</directory>
      </resource>
    </resources>
  </build>
</project>


德夫·泽维尔
爪哇角委员会
0.1-1快照
4.0.0
前端
罐子
org.apache.maven.plugins
maven清洁插件
3.1.0
maven插件
maven清洁插件
3.1.0
距离
com.github.eirslett
前端maven插件
1.11.2
安装节点和NPM
安装节点和npm
v14.16.0
npm安装
npm
npm运行构建
npm
运行build--prod
区/前端

1）。第一个检查是用户登录。2). 如果不是，则重定向到登录页面else主页。嗨，Vinit_Saini，我做了一件非常类似的事情（见更新2）。如果用户登录显示主页，则重定向至登录页面。在我的例子中，为了测试功能，用户没有登录（请参阅AuthGuard），因此在它显示LoginPage的那一刻。但这并不能解决我遇到的问题，可能是因为当您启动服务器时，这需要从dist目录获取resources？我不能再测试了，但如果这是原因，另一种选择可能是ng serve——aot您将获得dist

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },

  // otherwise redirect to home
  { path: '**', redirectTo: '' }
];

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

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

//import { AuthenticationService } from '@app/_services';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(
    private router: Router
    //,private authenticationService: AuthenticationService
  ) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
/*    const currentUser = this.authenticationService.currentUserValue;
    if (currentUser) {
      // logged in so return true
      return true;
    }*/

    // not logged in so redirect to login page with the return url
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
    return false;
  }
}

- PorjectName
   - backend
       ......
       pom.xml
   - frontend
       .......
       pom.xml
   - pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <parent>
  <groupId>dev.xavier</groupId>
    <artifactId>java-angular-commission</artifactId>
    <version>0.1-SNAPSHOT</version>
  </parent>
  <modelVersion>4.0.0</modelVersion>
  <artifactId>frontend</artifactId>
  <packaging>jar</packaging>
  <dependencies>
    <dependency>
      <groupId>org.apache.maven.plugins</groupId>
      <artifactId>maven-clean-plugin</artifactId>
      <version>3.1.0</version>
      <type>maven-plugin</type>
    </dependency>
  </dependencies>
  <build>
    <plugins>
      <!-- clean the dist directory used by Angular -->
      <plugin>
        <artifactId>maven-clean-plugin</artifactId>
        <version>3.1.0</version>
        <configuration>
          <filesets>
            <fileset>
              <directory>dist</directory>
            </fileset>
          </filesets>
        </configuration>
      </plugin>

      <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>1.11.2</version>

        <executions>

          <!-- Install node and npm -->
          <execution>
            <id>Install Node and NPM</id>
            <goals>
              <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
              <nodeVersion>v14.16.0</nodeVersion>
            </configuration>
          </execution>

          <!-- clean install -->
          <execution>
            <id>npm install</id>
            <goals>
              <goal>npm</goal>
            </goals>
          </execution>

          <!-- code validation -->
     <!--     <execution>
            <id>npm run lint</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <phase>test</phase>
            <configuration>
              <arguments>run lint</arguments>
            </configuration>
          </execution>-->

          <!-- build app -->
          <execution>
            <id>npm run build</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>run build --prod</arguments>
            </configuration>
          </execution>

        </executions>
      </plugin>

    </plugins>

    <resources>
      <resource>
        <!-- we copy the content of the frontend directory in the final artifact -->
        <directory>dist/frontend</directory>
      </resource>
    </resources>
  </build>
</project>