I'm building a PWA for a restaurant and I need to protect certain pages with a pincode or password.
Platform: Safari, iPads.
The app itself has only 2 views:
show all tables
show the bill of a specific table
When a waiter clicks a table it will show a bill that then will be handed over to the client. How can I restrict a client from going back to the main screen with all tables with a pin code or a password that will be set at the beginning of the work session, for example (when the waiter authenticates)?
You can use a router middleware to prevent the client to navigate elsewhere.
router.beforeEach(function(to, from, next) {
if (isLocked) {
alert('Navigation is locked');
next(false);
} else {
next();
}
});
Here is an example where the waiter can lock the page after selecting the bill. Although it can be automatically set in mounted. You can adjust the code to your own needs.
Jsfiddle
Related
I'm using SendInBlue chat widget on a Nuxt/VueJs website. Through the
SendInBlue Conversations UI,
the widget reports the visitor's page current location (url and title).
However, the location does not change when the internal route changes (no hard browser location change).
I want to see the location changes.
How can I notify the SendInBlue Chat Widget that the route is changing?
The
SendInBlue Chat Widget API
includes a pageView method that can be called to alert the widget to a route change.
SibConversations('pageView')
This Answer about watching a route
provides the basic framework. Note that in my case I added the code to the /layouts/default.vue since it renders most of my pages. (Add to all necessary layouts.)
<script>
export default {
watch: {
$route() {
// on route change, notify SendInBlue Chat Widget so it updates visitor location
if (process.client) {
// delay 0.5 seconds to be sure route has actually changed ($nexttick does show correct page title)
window.setTimeout(() => {
window.SibConversations('pageView')
}, 500)
}
},
},
// ... and data, methods, etc., as needed
}
</script>
So now when the route changes, we notify the widget.
Note: If we trigger window.SibConversations('pageView') without a delay, I found that the title is not correct. I'm assuming the page is not yet rendered. I tried using this.$nexttick, but the title is still not present. So, I use window.setTimeout() to provide a short delay. I found that 100ms works for me, but I used a longer time in case a slower computer took longer. (And we aren't worried about half-second accuracy.)
I also wrapped the call to ensure it's only called on client side. No nasty "windows undefined" errors.
I am trying to test my Vue.js app authentication.
Assume, a user log in and to go to his profile the link would look like this.
https://website.com/profile/1
He can get to his page but what if he is a hacker and if he tried to type
https://website.com/profile/2
which will go to the profile of another person.
How can I redirect this hacker to the login page if he tried to go to a URL that does not belong to his profile?
Right now, I can stop him from viewing another people profile but still, he is still in the profile link even if he typed
https://website.com/profile/2
What I am trying to accomplish is that if users type a link that does not belong to his or her but which is valuable to other people it will redirect to the login page.
I am not storing User Data on the client side.
Firstly, you have to assume that the user is able to manipulate the webpage in any way and access all data stored on the client side. So you should not be storing sensitive data on the client that you do not want the user to access. (You may not be doing this, but I thought I should point it out.)
I assume you have a Profile component. You can use Vue Router navigation guards to authorize the transition and abort or redirect it if it is disallowed.
If the user is logged in then you are probably storing information about the logged in user on the client. You can use this to check if the profile page being visited belongs to the logged in user.
In your Profile component:
beforeRouteEnter(to, from, next) {
if (!loggedInUser) {
// User not logged in
next('/')
} else if (loggedInUser.id !== to.params.userId) {
// User is accessing profile page of another user, redirect
// to their profile page instead
next({ params: { userId: loggedInUser.id } })
} else {
next()
}
}
This is just an example of what you can do, I can't give a specific answer without knowing exactly how your app works.
I have an MVC 4 Razor intranet app using Windows credentials where a new user must register (existing users are automatically redirected to the main user page). This generates an approval request email to the admin and returns a view with an Exit button simply saying your application has been submitted. The user then closes the app.
The email is in HTML and presents the user's entered data and has Approved or Declined selections. It then has a button to invoke code to insert the user into the Members table (if accepted) and return an email to the user with the decision.
Since some time may transpire between the app mailing the admin and the admin making the decision, the session will originally terminate. I need to have the email invoke a method to persist the new user, email the decision, and then simply exit. It will not involve the browser in any way, so no Views are involved. I could write this as a background console app, but that would involve duplicating a lot of code in the MVC app - with referential integrity issues on bug fixes or updates.
How can I write a method in the Controller that can be invoked by a link in the email as if from a browser that does the work and then exits without returning anything to a browser?
If I make the method an ActionResult method and return new EmptyResult() or return(null) I assume it will try to return an empty page to nowhere.
Can I alternatively construct a method in my Controller, where it has access to all of the support code, like?
public void EnrollMember(Member member, bool decision)
{
if (decision == true)
{
// insert new user into Members table
// generate accepted email
}
else
{
// generate declined email
}
}
and then just link to it the same way I link to Index(), /MyController/EnrollMember(...)?
There is no main() in the app since it is an ASP.NET MVC app, and I don't know how to terminate the app from within a Controller method without trying to return something, instead of from a View in the browser.
I'm a long-time programmer, but a .NET newbie so this probably has a simple answer.
The "view" is just the response. You don't necessarily have to return a view, but you must return a response. There's no way around that. If the link opens in a browser, then something will be displayed, regardless. Even if you were to just return an empty ContentResult, at least a blank page will be displayed in the browser.
To achieve something akin to what you're looking for, your best bet would be to return an HTML document with just a simple bit of JavaScript that will act to close the window:
<html>
<body>
<script>
window.close();
</script>
</body>
</html>
I like to build a to do list for multi company on one server. I build a to do list, but now I like to "scale" to app to different "sub servers"
I like to explain it by this example
Start: example.com - There is a login button. When you enter your account you are redirect to a subdomain
company1.example.com Here is the to do list for company 1. This company uses his own database for example mongodb://localhost:27017/compagny1
When I direct go to company1.example.com without a login I will be redirected to example.com
I this possible or is there a other way to set user and database for meteor. I don't like to have multi servers for example: localhost:3001 localhost:3002 etc
Thank you for giving me a direction for this question
I would do something similar:
add user field to store company name.
(eg. user.company = company1)
use iron router and put a onBeforeAction to the page that user is redirected after login
onBeforeAction: function (pause) {
if (Meteor.user()) { // only if user is logged in
var comp = Meteor.user().company
if(comp == 'company1'){
this.render('company1'); // will render example.com/company1 if setup
}
// pause this rendering of the rest of the before hooks and the action function
pause();
}
},
Update: i do not think many databases would be great. I better recomend making separate collections for each companys todos and subscribe them individually.
I decided to use SignalR for chat on my page. Chat page is opened when user clicks on "Enter Chat" link which is placed inside _Layout.cshtml. This works fine. However, what I would like to achieve is the following functionality:
On the left side of the page I would like to have some kind of
"online users" area and when one user logins, other users whose are
already logged in will be able to see that a new user just enters the
page.
Users who are online can chat with each other by simply
clicking on their names
I am using the following code to connect to the chat application:
$(function () {
//declare a proxy to reference the hub
var chatHub = $.connection.chatHub;
registerClientMethods(chatHub);
//Start Hub
$.connection.hub.start().done(function () {
registerEvents(chatHub);
chatHub.server.connect(#User.Identity.Name);
});
});
However when I place this code inside my _Layout.cshtml page, users are permanently logged off and connected again each time they navigate through pages (they are intended to be opened inside _Layout.cshtml).
Is there any way for persisting connection with the hub when navigating through page? What is the best practices when using this kind of functionality?
Whenever you navigate away from a page or in any way refresh the contents of the page you will need to start a fresh SignalR connection. There are two ways to handle this behavior when navigating through pages:
Create a single page application.
Handle users connecting/disconnecting on the server in such a way that they're not truly logged out until they leave the site.
Now to dive into a little more detail on #2. Users on your site may disconnect/connect every time they transition to a new page but you can control how they log out or appear disconnected via your server side logic. You can get this functionality by keeping a set of "online" users in your server side code and then only considering them offline after a specified timeout value.