No ideas, I started last week. 
I've discovered v-cloak in an example and searched in the Vue API
Brilliant, thanks for that and well spotted. I'd seen the problem but hadn't gotten around to working out how to fix. I will certainly add that to the standard template for the next release.
You may notice that the GitHub master is already a different version that I will use to collect any bits and pieces like this.
Does anybody have a recipe or flow to show user security for this ui tool so that users can log in and it's not public?
Hi Bryan, apologies but I still don't have a working example for this, I've just not had time to do it along side everything else.
The process has changed somewhat between v1 and v2 but it should now be more logical.
Basically, you need to understand that Node-RED and uibuilder use ExpressJS as the web server. This means that you can use Express middleware to add security features including session management, login (including page redirection), etc.
There are lots of examples on the web - they just need a bit of tweaking for Node-RED/uibuilder.
The other aspect you need to think about is security the websocket connection. This has its own middleware function but you need to note the limitations of websockets. That is to say that they don't support custom http headers so the middleware only works on initial connection which is when the http handshake occurs. Once completed, the connection is "upgraded" to websockets and any futher security processing needs to exchange data via the websocket messages and not via headers.
I've got to rush I'm afraid as I'm off on hols. If you do manage to get anything going, please share in another thread or create a uibuilder WIKI entry and I will try to keep an eye out for any more questions you have.
Couple things that I will be adding to the wiki at a later stage, but have seen working locally now. All based on using Vue as frontend framework:
- It is possible to add preprocessors to
http-vue-loaderto have the code resolved in the same or similar way as Webpack would do, except done live on the browser side. I have so far tested this with SCSS including imports from (local) files exposed by bootstrap, but it should work too with TypeScript or Pug too, for example. I wrote a preliminary article on this a few days ago, though it's not visible in the sidebar yet on the wiki. - It is possible to lazy load components, both directly or when using Vue Router. It is thus possible to create a Single Page Application on a single uibuilder node, capable of routing through different pages each with dynamically populated content, where instead of loading all of the surrounding interface upon first loading it is loaded upon usage instead. See the Vue docs for the basic concept. It is implemented through
() => Promise.resolve(httpVueLoader('./path/to/component.vue'))as opposed to using the dynamic import as suggested in the docs. - You can use ES6 style imports from other JS files, if the top level javascript file, for example the default
index.jsis set astype="module"in the HTML file. For this to work you have to use theexport default ...style in the js files that are imported. However, the exports in the script tag ofhttp-vue-loaderhave to be of the typemodule.exports = ...otherwise you will get a non-descriptive error message for something unrelated.
1 Like
Oops, was I meant to do that?
Nice, looking forward to an example. My revised, family friendly home dashboard could certainly make really good use of this as it loads rather a lot of stuff right now but many of the tabs will rarely be used.
I think that only works on some browsers right?
It does yeah. The thing Iām creating now wonāt be supported on Internet Explorer which will be a breaking change/issue for some. It should however work on edge, but adding a build step and transpiling down to ES5 brings back the compatibility. Just an entire different way of setting it up.
No, I was planning to describe support for at least two other preprocessors before making it decently findable Gives me a chance to see that it reads well and all that.
1 Like
I've just pushed out v2.0.2 - the main change is that the examples now work and I've included @cflurin's caching example which is also a much reduced VueJS template example in case you need something a bit simpler to help you get going.
It is in the flow library already so you should be able to update straight away.
I've also updated some of the WIKI examples and other pages and made it clearer which are still v1 related.
1 Like
Hi,
In the cache function you added node.status:
node.status({fill:'green',shape:'ring',text:'Cached: ' + Object.keys('ui_msgs').length})
but it should be:
node.status({fill:'green',shape:'ring',text:'Cached: ' + Object.keys(ui_msgs).length})
Otherwise you get the length of the string ui_msgs = 7
Drat!
I will fix in the next release, I was sure that was working OK.
Thanks.
Any developments on user login - I ask this becasue the mui and ui in nodered as well as nodered itself only offer editor security/login - I think your user base would increase if you could offer security to the ui that is plugand play.
Hi Bryan, I am sure that you are correct. It is something that I'm trying to find time to document. I think all of the pieces are in place. Certainly there is enough to secure the http part.
The websocket part is a little more tricky to get right and I may yet end up adding some helpers to uibuilderfe. However, it should still be possible to do without those, just a little more complex.
Step 1 is to properly document the use of the ExpressJS middleware in terms of it intercepting all requests to the uibuilder root url and being able to redirect to a login page then check the resulting authentication/authorisation.
Step 2 is then to add the websocket security into that.
Of course, I'd absolutely welcome other people having a crack at it first 
