0

我真的需要帮助，因为我尝试了很多方法，但没有成功。我有具有 ng-view 的 index.html。app.js 定义了路由。我希望在使用页面（#/home、#/groups）之前对用户进行身份验证，但是，它似乎不起作用。我需要对href做什么，以便所有页面都经过身份验证

项目结构

索引.html

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Spring boot and Angularjs Tutorial</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>
<div class="menu-section" style="background:black;width: 100%;height: 100%" ng-app="app">
    <h1 style="color:white;text-align:center">SOF Financial</h1>
    <p style="color:white;text-align:center">Financial Information Services</p>
    <div style="text-align:center" class ="topnav">
        <a class="active" href="#/home">Home</a>
        <a href="#/indices">Indices & Commodities</a>
        <a href="#/blogs">Blogs</a>
        <a href="#/groups">Groups</a>
    </div>
</div>
<div ng-view style="background-color: black"></div>
<script src="/webjars/angularjs/1.4.9/angular.js"></script>
<script src="/webjars/angularjs/1.4.9/angular-resource.js"></script>
<script src="/webjars/angularjs/1.4.9/angular-route.js"></script>
<script src="/js/app.js"></script>
<link rel="stylesheet" href="/webjars/bootstrap/3.3.6/css/bootstrap.css">

应用程序.js

var app = angular.module('app', ['ngRoute','ngResource']);
app.config(function($routeProvider){
    $routeProvider
        .when('/',{
            templateUrl: '/views/home.html',
            controller: 'homeController'
        })
        .when('/indices',{
            templateUrl: '/views/indices.html',
            controller: 'indicesController'
        })
        .otherwise(
            { redirectTo: '/'}
        );
});

MVCConfig

我已将以下条目添加到 pom.xml

 <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>

我想了解如何在将视图中的所有页面显示给用户之前对其进行身份验证。

4

1 回答 1

0

我不知道你的开发水平。但是通过您的设置，您有两个方面。使用 Java 的服务器端和使用 angularjs 的客户端/前端。服务器端将应答前端的调用并提供结果。代码在服务器上，因此很难“直接”访问。应用程序端通常在加载网页时一次性交付。加载后，所有代码都可以在客户端使用。

AngularJS 路由它们自身不存在于服务器端（java spring），它们仅在您的 angularjs 应用程序（客户端浏览器）中声明/可用。

有很多方法可以“解决”您的问题……有些方法比其他方法更好，但更难做到。

快速和“肮脏”

无论如何定义 angularjs 模块中的所有路由，但有一个专用的 REST/服务调用来获取菜单/链接以允许路由并在其上生成导航。当然用户仍然可以直接在 url 中输入路由并访问页面。页面开头的另一个脏调用，以检查是否可以访问当前路由。

更好但仍不完美

拥有一个动态 js 文件（Spring 控制器），它返回带有所有可用路由的 angularjs 代码。这仍然会加载所有 angularjs 组件，即使它们没有被使用，因此可以为潜在的黑客提供线索……但这已经不算太糟糕了。

几乎完美但仍然是一个梦想？

延迟加载服务器提供的路由列表。访问它们后，将从服务器下载源代码。这意味着只会加载路由请求的组件。一种 UI 应用程序只会随着用户的行为/需求而增长。我们在 angular8 中朝这个方向尝试了一些东西并取得了一些成功。

于 2020-12-02T19:33:32.177 回答