[*] manage 2 wrappers+ 2 routeSet (1 for authed users, other for not authed users)
This commit is contained in:
parent
6ec30fa1e9
commit
d7677eacb5
|
@ -1,47 +0,0 @@
|
|||
import {APIClient} from './lib/api-client'
|
||||
import {GlobalStore} from './lib/gstore'
|
||||
import VueRouter from 'vue-router'
|
||||
import routes from './routes'
|
||||
import {PopupController} from './lib/popup-controller'
|
||||
import {ContentController} from './lib/content-controller'
|
||||
import {RoomController} from './lib/room-controller'
|
||||
import {ChannelController} from './lib/channel-controller'
|
||||
|
||||
import XHRClientDriver from './lib/client/xhr.js'
|
||||
import WebSocketClientDriver from './lib/client/ws.js'
|
||||
|
||||
|
||||
window.gs = new GlobalStore();
|
||||
window.api = new APIClient('localhost', null, false);
|
||||
window.xhrcd = XHRClientDriver;
|
||||
window.wscd = WebSocketClientDriver;
|
||||
|
||||
/* (1) Global data
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Get Full URI */
|
||||
gs.set('URI', document.URL.replace(/^(?:[^\/]+\/\/|[^\/]+\/)/, '').split('/').filter(function(v,i){ return !!i && v.length; }));
|
||||
|
||||
/* (2) Store routes */
|
||||
gs.set('routes', routes[0]);
|
||||
|
||||
/* (3) Init. vue router */
|
||||
gs.set('router', new VueRouter({
|
||||
routes: gs.get.routes
|
||||
}));
|
||||
|
||||
|
||||
|
||||
|
||||
/* (2) Main components
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Initialize popup management */
|
||||
gs.set('popup', new PopupController());
|
||||
|
||||
/* (2) Initialize content management */
|
||||
gs.set('content', new ContentController());
|
||||
|
||||
/* (3) Initialize rooms & room menu */
|
||||
gs.set('room', new RoomController());
|
||||
|
||||
/* (4) Initialize channels & channel menu */
|
||||
gs.set('channel', new ChannelController());
|
|
@ -1,3 +1,5 @@
|
|||
import LocalStorageInterface from './local-storage-interface'
|
||||
|
||||
export default class Authentication{
|
||||
|
||||
|
||||
|
@ -7,11 +9,21 @@ export default class Authentication{
|
|||
---------------------------------------------------------*/
|
||||
constructor(){
|
||||
|
||||
/* (1) Default attributes */
|
||||
this._authkey = 'auth.default';
|
||||
/* (1) Default localStorage Interface */
|
||||
this.lsi = new LocalStorageInterface('__auth__', 5*60);
|
||||
|
||||
/* (2) Update token */
|
||||
if( this.token !== null )
|
||||
this.lsi.push('token', this.token);
|
||||
|
||||
/* (2) Section Title */
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* (2) TOKEN facade
|
||||
*
|
||||
---------------------------------------------------------*/
|
||||
get token(){ return this.lsi.fetch('token'); }
|
||||
set token(_token){ return this.lsi.push('token', _token); }
|
||||
|
||||
}
|
|
@ -5,13 +5,15 @@ export default class LocalStorageInterface{
|
|||
*
|
||||
* @_prefix<String> localStorage Interface Prefix (prefix)
|
||||
* @_ttl<int> Seconds default valid time for stored data
|
||||
* @_session<bool> Whether to use sessionStorage (default is localStorage)
|
||||
*
|
||||
---------------------------------------------------------*/
|
||||
constructor(_prefix, _ttl){
|
||||
constructor(_prefix, _ttl, _session=false){
|
||||
|
||||
/* (1) Initialise private attributes */
|
||||
this._prefix = 'root';
|
||||
this._ttl = null;
|
||||
this._driver = !!_session ? sessionStorage : localStorage;
|
||||
|
||||
/* (2) Initialise public attributes */
|
||||
this.keys = [];
|
||||
|
@ -31,13 +33,13 @@ export default class LocalStorageInterface{
|
|||
|
||||
}
|
||||
|
||||
/* (1) Synchronise keys from localStorage
|
||||
/* (1) Synchronise keys from this._driver
|
||||
*
|
||||
---------------------------------------------------------*/
|
||||
synchronise(){
|
||||
|
||||
// 1. Get localStorage key list
|
||||
let keys = Object.keys(localStorage);
|
||||
// 1. Get this._driver key list
|
||||
let keys = Object.keys(this._driver);
|
||||
|
||||
// 2. Local copy of prefix
|
||||
let prefix = `${this._prefix}.`;
|
||||
|
@ -71,19 +73,19 @@ export default class LocalStorageInterface{
|
|||
return false;
|
||||
|
||||
/* (2) Default value for _ttl */
|
||||
_ttl = isNaN(_ttl) ? this._ttl : _ttl;
|
||||
let ttl = isNaN(_ttl) || _ttl === null ? this._ttl : parseInt(_ttl);
|
||||
|
||||
|
||||
/* (2) Store data
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Build storage object */
|
||||
let storage_object = {
|
||||
expires: _ttl ? new Date().getTime() + _ttl*1000 : null,
|
||||
expires: ttl ? new Date().getTime() + ttl*1000 : null,
|
||||
data: _data
|
||||
};
|
||||
|
||||
/* (2) Store storage object */
|
||||
localStorage.setItem(`${this._prefix}.${_name}`, JSON.stringify(storage_object));
|
||||
this._driver.setItem(`${this._prefix}.${_name}`, JSON.stringify(storage_object));
|
||||
|
||||
/* (3) Synchronize keys */
|
||||
this.keys.push(_name);
|
||||
|
@ -119,7 +121,7 @@ export default class LocalStorageInterface{
|
|||
/* (2) Fetch data
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Try to get data */
|
||||
let fetched = localStorage.getItem(`${this._prefix}.${_name}`);
|
||||
let fetched = this._driver.getItem(`${this._prefix}.${_name}`);
|
||||
|
||||
/* (2) Try to parse */
|
||||
try{
|
||||
|
@ -133,7 +135,7 @@ export default class LocalStorageInterface{
|
|||
}
|
||||
|
||||
/* (4) If not valid anymore -> delete + return NULL */
|
||||
if( storage_object.expires < new Date().getTime() ){
|
||||
if( !isNaN(storage_object.expires) && storage_object.expires < new Date().getTime() ){
|
||||
this.pop(_name);
|
||||
return null;
|
||||
}
|
||||
|
@ -162,8 +164,8 @@ export default class LocalStorageInterface{
|
|||
if( this.keys.indexOf(_name) < 0 )
|
||||
return null;
|
||||
|
||||
/* (3) Remove from localStorage */
|
||||
localStorage.removeItem(`${this._prefix}.${_name}`);
|
||||
/* (3) Remove from this._driver */
|
||||
this._driver.removeItem(`${this._prefix}.${_name}`);
|
||||
|
||||
/* (4) Update keys */
|
||||
this.keys = this.keys.filter( (k) => (k!==_name) );
|
||||
|
|
|
@ -1,54 +1,25 @@
|
|||
/* (1) Imports
|
||||
---------------------------------------------------------*/
|
||||
/* (1) NPM libs */
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import routes from './routes'
|
||||
|
||||
/* (2) Vues */
|
||||
import wrapper from './vue/wrapper.vue'
|
||||
|
||||
/* (3) Data */
|
||||
require('./common.js');
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import auth_wrapper from './vue/auth/wrapper.vue'
|
||||
import noauth_wrapper from './vue/noauth/wrapper.vue'
|
||||
|
||||
|
||||
/* (1) Setup Vue, VueRouter, Authentication lib */
|
||||
require('./setup.js');
|
||||
/* (2) Get appropriate page data */
|
||||
let auth_folder = (gs.get.auth) ? 'auth' : 'noauth';
|
||||
let page_file = gs.get.router.history.current.name || gs.get.routes[auth_folder][0].name;
|
||||
|
||||
/* (3) Load page script */
|
||||
require(`./page/${auth_folder}/${page_file}.js`);
|
||||
|
||||
/* (2) Initialisation
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Render view */
|
||||
/* (4) Select appropriate wrapper */
|
||||
const wrapper = (gs.get.auth) ? auth_wrapper : noauth_wrapper;
|
||||
|
||||
/* (5) Render view */
|
||||
Vue.use(VueRouter);
|
||||
new Vue({
|
||||
el: '#vue',
|
||||
router: gs.get.router,
|
||||
render(h){ return h(wrapper); }
|
||||
})
|
||||
|
||||
/* (2) Store route params */
|
||||
window.initial_link = gs.get.router.history.current.params.link;
|
||||
console.log(`[channel.URL] ${initial_link}`);
|
||||
|
||||
/* (3) Channel data gathering
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Fetch channel data */
|
||||
setTimeout(() => {
|
||||
|
||||
/* (2) Fetch data */
|
||||
gs.get.channel.dump( require('./mockup/api-channels.json') );
|
||||
|
||||
/* (3) Find if @link matches */
|
||||
var redirect_id = null;
|
||||
for( let c of gs.get.channel.list ){
|
||||
|
||||
if( c.link === window.initial_link ){
|
||||
redirect_id = c.id;
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* (4) Emulate navigatation from URL */
|
||||
console.log(`[restore.channel] ${redirect_id}`);
|
||||
gs.get.channel.nav(redirect_id);
|
||||
|
||||
}, 500);
|
|
@ -0,0 +1,50 @@
|
|||
import PopupController from '../../lib/popup-controller'
|
||||
import ContentController from '../../lib/content-controller'
|
||||
import RoomController from '../../lib/room-controller'
|
||||
import ChannelController from '../../lib/channel-controller'
|
||||
|
||||
|
||||
/* (1) Channel data gathering
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Store route params */
|
||||
window.initial_link = gs.get.router.history.current.params.link;
|
||||
console.log(`[channel.URL] ${initial_link}`);
|
||||
|
||||
/* (2) Fetch channel data */
|
||||
setTimeout(() => {
|
||||
|
||||
/* (3) Fetch data */
|
||||
gs.get.channel.dump( require('../../mockup/api-channels.json') );
|
||||
|
||||
/* (4) Find if @link matches */
|
||||
var redirect_id = null;
|
||||
for( let c of gs.get.channel.list ){
|
||||
|
||||
if( c.link === window.initial_link ){
|
||||
redirect_id = c.id;
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* (4) Emulate navigatation from URL */
|
||||
console.log(`[restore.channel] ${redirect_id}`);
|
||||
gs.get.channel.nav(redirect_id);
|
||||
|
||||
}, 500);
|
||||
|
||||
|
||||
|
||||
/* (2) Main components
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Initialize popup management */
|
||||
gs.set('popup', new PopupController());
|
||||
|
||||
/* (2) Initialize content management */
|
||||
gs.set('content', new ContentController());
|
||||
|
||||
/* (3) Initialize rooms & room menu */
|
||||
gs.set('room', new RoomController());
|
||||
|
||||
/* (4) Initialize channels & channel menu */
|
||||
gs.set('channel', new ChannelController());
|
|
@ -1,35 +0,0 @@
|
|||
/* (1) Imports
|
||||
---------------------------------------------------------*/
|
||||
/* (1) NPM libs */
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import routes from '../routes/home'
|
||||
|
||||
/* (2) Vues */
|
||||
import wrapper_vue from '../vue/wrapper.vue'
|
||||
|
||||
/* (3) Data */
|
||||
require('../data/common');
|
||||
require('../data/home');
|
||||
|
||||
|
||||
|
||||
|
||||
/* (2) Initialisation
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Init Router */
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
routes: require('./routes.js')
|
||||
});
|
||||
|
||||
/* (2) Store router in gstore */
|
||||
gstore.add('router', router);
|
||||
|
||||
/* (3) Render view */
|
||||
Vue.use(VueRouter);
|
||||
new Vue({
|
||||
el: '#WRAPPER',
|
||||
router,
|
||||
render: h => h(wrapper_vue)
|
||||
});
|
|
@ -0,0 +1 @@
|
|||
|
|
@ -1,11 +1,29 @@
|
|||
export default{ 0: [
|
||||
export default {
|
||||
|
||||
{
|
||||
path: '/channel/:link',
|
||||
component: require('./vue/channel.vue').default
|
||||
}, {
|
||||
path: '*',
|
||||
redirect: '/channel/me'
|
||||
}
|
||||
auth: [
|
||||
|
||||
] }
|
||||
{
|
||||
name: 'channel',
|
||||
path: '/channel/:link',
|
||||
component: require('./vue/auth/channel.vue').default
|
||||
}, {
|
||||
path: '*',
|
||||
redirect: '/channel/me'
|
||||
}
|
||||
|
||||
],
|
||||
|
||||
noauth: [
|
||||
|
||||
{
|
||||
name: 'login',
|
||||
path: '/login',
|
||||
component: require('./vue/noauth/login.vue').default
|
||||
}, {
|
||||
path: '*',
|
||||
redirect: '/login'
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
}
|
|
@ -0,0 +1,45 @@
|
|||
/* (1) VueJS data */
|
||||
import VueRouter from 'vue-router'
|
||||
import GlobalStore from './lib/gstore'
|
||||
import routes from './routes'
|
||||
|
||||
/* (2) Custom libs */
|
||||
import Authentication from './lib/authentication.js'
|
||||
import XHRClientDriver from './lib/client/xhr.js'
|
||||
import WebSocketClientDriver from './lib/client/ws.js'
|
||||
|
||||
|
||||
|
||||
/* (1) Custom lib accessors
|
||||
---------------------------------------------------------*/
|
||||
window.gs = new GlobalStore();
|
||||
window.xhrcd = XHRClientDriver;
|
||||
window.wscd = WebSocketClientDriver;
|
||||
window.auth = new Authentication();
|
||||
|
||||
|
||||
|
||||
/* (2) Global data
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Get Full URI */
|
||||
gs.set('URI', document.URL.replace(/^(?:[^\/]+\/\/|[^\/]+\/)/, '').split('/').filter(function(v,i){ return !!i && v.length; }));
|
||||
|
||||
/* (2) Store routes */
|
||||
gs.set('routes', routes);
|
||||
|
||||
/* (3) Store if authenticated */
|
||||
gs.set('auth', auth.token !== null);
|
||||
|
||||
/* (4) Init. vue router */
|
||||
gs.set('router', new VueRouter({
|
||||
routes: gs.get.auth ? gs.get.routes['auth'] : gs.get.routes['noauth']
|
||||
}));
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
|
||||
<div class='container'>
|
||||
|
||||
<div class='header'>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='body'>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template><script>
|
||||
export default {
|
||||
|
||||
name: 'login-',
|
||||
|
||||
data(){ return { gs: gs.get }; }
|
||||
|
||||
}
|
||||
|
||||
</script>
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
|
||||
|
||||
|
||||
<div id="WRAPPER">
|
||||
|
||||
<!-- Container -->
|
||||
<router-view></router-view>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</template><script>
|
||||
|
||||
export default {
|
||||
|
||||
name: 'wrapper-',
|
||||
|
||||
data(){ return { gs: gs.get }; },
|
||||
|
||||
}
|
||||
|
||||
</script>
|
Loading…
Reference in New Issue