3

フロント エンドに 4 つのモジュールを持つアプリケーションがあり、フロント エンドで可能な限り AngularJ を使用しようとしています。空の Web サイト asp.net プロジェクトを使用して、すべてのファイルと REST serviceStack をホストしています。プロジェクトには、次のような構造があります。

~/ (web.config, global.asax and all the out of the box structure for an asp.net website)
- App <-  AngularJs 
    - Users  <-  js controllers and views (static html files)
    - Companies
    - BackEnd
    - Public
    Index.html
    IndexCtrl.js
    App.js
- Content
- Js

私は angularjs サービス呼び出しと、servicestack で REST を使用しているバックエンドを使用しています。

問題は、これらの静的 html ファイルへのアクセスを認証済みユーザーのみに制限するにはどうすればよいかということです。たとえば、企業、バックエンド、ユーザーの内部にあるものとしましょう

4

3 に答える 3

5

こんにちはいくつかの調査を行った後、これは私にとってうまくいった解決策です：

  1. ナゲットからかみそりマークダウンをインストールする
  2. デフォルトの動作に合わせてファイル構造を変更します RM [Razor Markdown] to /views
  3. このサービス スタックの例で説明されているアプローチに従って、Web 構成を変更します。
  4. すべての静的 html ファイルを .cshtml ファイルに変更します。これにより、既定では、拡張子なしの /views/{Pagename} のような拡張子なしの同じルートが作成されます。このアプローチを使用して、承認ロジックを実装しやすくしています (少なくとも私のため）
  5. このページで詳細を確認できる authorize 属性を使用してサービス メソッドを更新します。

もう少し説明するために、これはこれまでの私のルート定義です:

'use strict';
angular.module('myApp', ['myApp.directives', 'myApp.services']).config(
    ['$routeProvider', function($routeProvider) {
        $routeProvider.when('/Dashboard', {
            controller: 'dashboardCtrl',
            templateUrl: 'Views/dashboard'
            }).when('/Payments', {
            controller: 'paymentsCtrl',
            templateUrl: 'Views/payments'
        }).
            when('/Login', {
                controller: 'loginCtrl',
                templateUrl: 'Views/login'
            });
    }]

);

参照がカミソリ パスを指していることに注意してください。

これは、角度で行った小さなメニューです

<div class="container">

  <div class="navbar" ng-controller="indexCtrl">
    <div class="navbar-inner">
      <a class="brand" href="#/">header menu</a>
      <ul class="nav">
         <li ng-class="{active: routeIs('/Dashboard')}"><a href="#/Dashboard">Dashboard</a></li>
         <li ng-class="{active: routeIs('/Login')}"><a href="#/Login">Login</a></li>
         <li ng-class="{active: routeIs('/Payments')}"><a href="#/Payments">payments</a></li>
      </ul>
    </div>
  </div>


  <ng-view></ng-view>

</div>

支払いページが制限されているとしましょう。そのため、ページをクリックするたびに、401 の承認されていないメッセージが表示されます。

サービス ホスト:

 public override void Configure(Container container)
        { 

            Plugins.Add(new AuthFeature(() => new AuthUserSession(), new IAuthProvider[] {
                new FacebookAuthProvider(appSettings), 
                new TwitterAuthProvider(appSettings), 
                new BasicAuthProvider(appSettings), 
                new GoogleOpenIdOAuthProvider(appSettings),
                new CredentialsAuthProvider()
            })); //I'm going to support social auth as well.

            Plugins.Add(new RegistrationFeature());

            Routes.Add<UserRequest>("/Api/User/{Id}");
            Routes.Add<LoginRequest>("/Api/User/login","POST");
            Routes.Add<PaymentRequest>("/views/Payments");


        }

それが役立つことを願っています

于 2013-08-05T18:44:43.120 に答える
0

フォーム認証を使用しないのはなぜですか? いくつかの < location > タグを web.config に追加するだけで、さまざまなセクションを許可/禁止できます。ロールに基づいて行うこともできます。

于 2013-08-05T07:48:21.403 に答える