Angular 2 / .NET Core-授权的内容预渲染

Question

I am trying to implement authentication/authorization on Angular 2 and .net core (kicked off with this: https://github.com/aspnet/JavaScriptServices )

What Is my storage options for auth token (jwt) - so it could be accessible?:

• From client: write on login and when needed to renew the token, read when making get/post requests
• From server: read when node is prerendering the app (same requests, but from node context)

I understand that there is no much point to prerender protected content - since it won't be indexed anyways - but this brings the flickering issue back. Since node can not access this token (in my scenario) - server returns content-less html (in case the content requires authorization)

Currently I store my token in browser's local storage:

localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token }));

... obviously node has no such thing and can not access it ...

Simple get request:

let headers = new Headers({ 'Authorization': 'Bearer ' + this.authenticationService.token });
let options = new RequestOptions({ headers: headers });
this.http.get(url, options).subscribe(response => callback(<any>response));

I am really early on learning/adopting this - I would also consider any other auth methods, but it has to comply with rule to be able to prerender authorized content.

Answer 1

I was able to solve this by using cookie as a token storage and then passing the token from cookie to asp-prerender-module.

Storage service for client and server:

declare var tokenStorage: NodeTokenStorage;    

@Injectable()
export class TokenStorageService implements NodeTokenStorage {

    getItem(key: string): string {
        if (!isBrowser) {
            return tokenStorage.getItem(key);
        }
        else {
            return getCookie(key);
        }
    }

    setItem(key: string, value: string): void {
        if (!isBrowser) {
            tokenStorage.setItem(key, value);
        }
        else {
            setCookie(key, value, 1);
        }
    }

    removeItem(key: string): void {
        if (!isBrowser) {
            tokenStorage.removeItem(key);
        }
        else {
            removeCookie(key);
        }
    }
}

interface NodeTokenStorage {
    getItem(key: string): string;
    setItem(key: string, value: string): void;
    removeItem(key: string): void;
}

Inject the cookie to prerender module:

<app
     asp-prerender-module="ClientApp/dist/main-server"
     asp-prerender-data='new { token = Context.Request.Cookies["token"] }'>
    Loading...
</app>

Read it the following way (ClientApp/boot-server.ts):

(global as any).tokenStorage = {
    getItem: function(key) {
        return this[key];
    },
    setItem: function (key, value) {
        this[key] = value;
    },
    removeItem: function(key) {
        this[key] = undefined;
    }
}

export default createServerRenderer(params => {

    (global as any).tokenStorage.setItem('token', params.data.token);

    return new Promise<RenderResult>((resolve, reject) => {
        const requestZone = Zone.current.fork({
            name: 'angular-universal request',
            properties: {
                baseUrl: '/',
                requestUrl: params.url,
                originUrl: params.origin,
                preboot: false,
                document: '<app></app>'
            },
            onHandleError: (parentZone, currentZone, targetZone, error) => {
                // If any error occurs while rendering the module, reject the whole operation
                reject(error);
                return true;
            }
        });

        return requestZone.run<Promise<string>>(() => platform.serializeModule(AppModule)).then(html => {
            resolve({ html: html });
        }, reject);
    });
});

Then - when app starts (before routing and redux store setup on a server side): I would read the token to get necessary data for authenticated user. This way complete html comes back from server including all the auth content and user-specific data.

refs: https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.SpaServices#server-side-prerendering