session and cookie examples
This commit is contained in:
King Wang
31
examples/session-and-cookie/frontend/src/index.ts
Normal file
31
examples/session-and-cookie/frontend/src/index.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import { HttpClient } from 'tsrpc-browser';
|
||||
import { enableSessionAndCookie } from './models/enableSessionAndCookie';
|
||||
import { showReqAndRes } from './models/showReqAndRes';
|
||||
import { serviceProto } from './shared/protocols/serviceProto';
|
||||
|
||||
// Create Client
|
||||
let client = new HttpClient(serviceProto, {
|
||||
server: 'http://127.0.0.1:3000',
|
||||
logger: console
|
||||
});
|
||||
|
||||
// Session and Cookie
|
||||
enableSessionAndCookie(client);
|
||||
|
||||
// Show Req and Return to View
|
||||
showReqAndRes(client);
|
||||
|
||||
// Bind Events
|
||||
const $ = document.querySelector.bind(document) as (v: string) => HTMLElement;
|
||||
$('#btnTest').onclick = () => {
|
||||
client.callApi('Test', {});
|
||||
};
|
||||
$('#btnClear').onclick = () => {
|
||||
client.callApi('Clear', {});
|
||||
};
|
||||
$('#btnGetCookie').onclick = () => {
|
||||
client.callApi('GetCookie', {});
|
||||
};
|
||||
$('#btnGetSession').onclick = () => {
|
||||
client.callApi('GetSession', {});
|
||||
};
|
||||
@@ -0,0 +1,35 @@
|
||||
import { HttpClient } from "tsrpc-browser";
|
||||
|
||||
const CookieStorageKey = '__MY_COOKIE__';
|
||||
const SessionStorageKey = '__MY_SESSION__';
|
||||
|
||||
export function enableSessionAndCookie(client: HttpClient<any>) {
|
||||
// Send
|
||||
client.flows.preCallApiFlow.push(v => {
|
||||
// Auto get __cookie from localStorage
|
||||
let cookieStr = localStorage.getItem(CookieStorageKey);
|
||||
v.req.__cookie = cookieStr ? JSON.parse(cookieStr) : undefined;
|
||||
|
||||
// Auto get __session from sessionStorage
|
||||
let sessionStr = sessionStorage.getItem(SessionStorageKey);
|
||||
v.req.__session = sessionStr ? JSON.parse(sessionStr) : undefined;
|
||||
|
||||
return v;
|
||||
})
|
||||
|
||||
// Return
|
||||
client.flows.preApiReturnFlow.push(v => {
|
||||
if (v.return.isSucc) {
|
||||
// Auto set __cookie to localStorage
|
||||
if (v.return.res.__cookie) {
|
||||
localStorage.setItem(CookieStorageKey, JSON.stringify(v.return.res.__cookie))
|
||||
}
|
||||
// Auto set __session to sessionStorage
|
||||
if (v.return.res.__session) {
|
||||
sessionStorage.setItem(SessionStorageKey, JSON.stringify(v.return.res.__session))
|
||||
}
|
||||
}
|
||||
|
||||
return v;
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { HttpClient } from "tsrpc-browser";
|
||||
|
||||
export function showReqAndRes(client: HttpClient<any>) {
|
||||
// Send
|
||||
client.flows.postApiReturnFlow.push(v => {
|
||||
(document.querySelector('.apiReq') as HTMLElement).innerText = 'callApi: ' + v.apiName + '\n\n' + JSON.stringify(v.req, null, 2);
|
||||
(document.querySelector('.apiReturn') as HTMLElement).innerText = JSON.stringify(v.return, null, 2);
|
||||
return v;
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { BaseRequest, BaseResponse } from './base';
|
||||
|
||||
export interface ReqClear extends BaseRequest {
|
||||
|
||||
}
|
||||
|
||||
export interface ResClear extends BaseResponse {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { BaseRequest, BaseResponse } from './base'
|
||||
|
||||
export interface ReqGetCookie extends BaseRequest {
|
||||
|
||||
}
|
||||
|
||||
export interface ResGetCookie extends BaseResponse {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { BaseRequest, BaseResponse } from './base'
|
||||
|
||||
export interface ReqGetSession extends BaseRequest {
|
||||
|
||||
}
|
||||
|
||||
export interface ResGetSession extends BaseResponse {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { BaseRequest, BaseResponse } from './base'
|
||||
|
||||
export interface ReqTest extends BaseRequest {
|
||||
|
||||
}
|
||||
|
||||
export interface ResTest extends BaseResponse {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
export interface BaseRequest {
|
||||
__session?: { [key: string]: any };
|
||||
__cookie?: { [key: string]: any };
|
||||
}
|
||||
|
||||
export interface BaseResponse {
|
||||
__session?: { [key: string]: any };
|
||||
__cookie?: { [key: string]: any };
|
||||
}
|
||||
@@ -0,0 +1,219 @@
|
||||
import { ServiceProto } from 'tsrpc-proto';
|
||||
import { ReqClear, ResClear } from './PtlClear';
|
||||
import { ReqGetCookie, ResGetCookie } from './PtlGetCookie';
|
||||
import { ReqGetSession, ResGetSession } from './PtlGetSession';
|
||||
import { ReqTest, ResTest } from './PtlTest';
|
||||
|
||||
export interface ServiceType {
|
||||
api: {
|
||||
"Clear": {
|
||||
req: ReqClear,
|
||||
res: ResClear
|
||||
},
|
||||
"GetCookie": {
|
||||
req: ReqGetCookie,
|
||||
res: ResGetCookie
|
||||
},
|
||||
"GetSession": {
|
||||
req: ReqGetSession,
|
||||
res: ResGetSession
|
||||
},
|
||||
"Test": {
|
||||
req: ReqTest,
|
||||
res: ResTest
|
||||
}
|
||||
},
|
||||
msg: {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export const serviceProto: ServiceProto<ServiceType> = {
|
||||
"version": 3,
|
||||
"services": [
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Clear",
|
||||
"type": "api"
|
||||
},
|
||||
{
|
||||
"id": 0,
|
||||
"name": "GetCookie",
|
||||
"type": "api"
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"name": "GetSession",
|
||||
"type": "api"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Test",
|
||||
"type": "api"
|
||||
}
|
||||
],
|
||||
"types": {
|
||||
"PtlClear/ReqClear": {
|
||||
"type": "Interface",
|
||||
"extends": [
|
||||
{
|
||||
"id": 0,
|
||||
"type": {
|
||||
"type": "Reference",
|
||||
"target": "base/BaseRequest"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"base/BaseRequest": {
|
||||
"type": "Interface",
|
||||
"properties": [
|
||||
{
|
||||
"id": 0,
|
||||
"name": "__session",
|
||||
"type": {
|
||||
"type": "Interface",
|
||||
"indexSignature": {
|
||||
"keyType": "String",
|
||||
"type": {
|
||||
"type": "Any"
|
||||
}
|
||||
}
|
||||
},
|
||||
"optional": true
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"name": "__cookie",
|
||||
"type": {
|
||||
"type": "Interface",
|
||||
"indexSignature": {
|
||||
"keyType": "String",
|
||||
"type": {
|
||||
"type": "Any"
|
||||
}
|
||||
}
|
||||
},
|
||||
"optional": true
|
||||
}
|
||||
]
|
||||
},
|
||||
"PtlClear/ResClear": {
|
||||
"type": "Interface",
|
||||
"extends": [
|
||||
{
|
||||
"id": 0,
|
||||
"type": {
|
||||
"type": "Reference",
|
||||
"target": "base/BaseResponse"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"base/BaseResponse": {
|
||||
"type": "Interface",
|
||||
"properties": [
|
||||
{
|
||||
"id": 0,
|
||||
"name": "__session",
|
||||
"type": {
|
||||
"type": "Interface",
|
||||
"indexSignature": {
|
||||
"keyType": "String",
|
||||
"type": {
|
||||
"type": "Any"
|
||||
}
|
||||
}
|
||||
},
|
||||
"optional": true
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"name": "__cookie",
|
||||
"type": {
|
||||
"type": "Interface",
|
||||
"indexSignature": {
|
||||
"keyType": "String",
|
||||
"type": {
|
||||
"type": "Any"
|
||||
}
|
||||
}
|
||||
},
|
||||
"optional": true
|
||||
}
|
||||
]
|
||||
},
|
||||
"PtlGetCookie/ReqGetCookie": {
|
||||
"type": "Interface",
|
||||
"extends": [
|
||||
{
|
||||
"id": 0,
|
||||
"type": {
|
||||
"type": "Reference",
|
||||
"target": "base/BaseRequest"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"PtlGetCookie/ResGetCookie": {
|
||||
"type": "Interface",
|
||||
"extends": [
|
||||
{
|
||||
"id": 0,
|
||||
"type": {
|
||||
"type": "Reference",
|
||||
"target": "base/BaseResponse"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"PtlGetSession/ReqGetSession": {
|
||||
"type": "Interface",
|
||||
"extends": [
|
||||
{
|
||||
"id": 0,
|
||||
"type": {
|
||||
"type": "Reference",
|
||||
"target": "base/BaseRequest"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"PtlGetSession/ResGetSession": {
|
||||
"type": "Interface",
|
||||
"extends": [
|
||||
{
|
||||
"id": 0,
|
||||
"type": {
|
||||
"type": "Reference",
|
||||
"target": "base/BaseResponse"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"PtlTest/ReqTest": {
|
||||
"type": "Interface",
|
||||
"extends": [
|
||||
{
|
||||
"id": 0,
|
||||
"type": {
|
||||
"type": "Reference",
|
||||
"target": "base/BaseRequest"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"PtlTest/ResTest": {
|
||||
"type": "Interface",
|
||||
"extends": [
|
||||
{
|
||||
"id": 0,
|
||||
"type": {
|
||||
"type": "Reference",
|
||||
"target": "base/BaseResponse"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user