I have a vuejs/apollo grapqhl Single page app. At one point there is an option to connect it another service (in this case vimeo). The flow is
click to start - this goes to the graphql server and collects a
redirect link to the vimeo oauth2 server with some state attached,
then does the redirect
the consent dialog happens on the vimeo oauth2 server, which
redirects to a route on the graphql server - this updates the back
end database with the vimeo user profile, and then returns to the
main front end app where it left off.
at this point I need to refetch the data updated at step 2, but of course I can't detect when this is complete.
Any suggestions as to how to co-erce the front end to refetch when step 3 is complete ?
Actually I figured out how to do this. Just check for the tab coming back into focus using ifvisible, and force a refetch when it does.
mounted () {
const that = this
ifvisible.on('focus', () => that.$apollo.queries.UserProfile.refetch())
}
Related
Problem
I have an electron app with vue. As the user has no UI to navigate back I created a back button.
This works so far so good. But being logged in and on the index page the user shouldn't be able to navigate back any more. As he would navigate back to the login but would get redirected back to the index page. And this wouldn't make much sense. For that I want to disable the back button.
Tested
I have added a global variable to get the previous route in my components. But somehow this gets messed up when clicking twice or more often. It looks like that:
router.beforeEach((to, from, next) => {
Vue.prototype.$prevRoute = from;
return next();
});
I think it is because when navigating back the previous route changed to the route you were coming from. And not the history anymore.
There seems to be a github feature request to add the referrer but it was opened in 2016 and I am not sure if it will be again the same problem as above.
https://github.com/vuejs/vue-router/issues/883
In-component guards
I also tested beforeRouteLeave and beforeRouteUpdate but as the back-button is in my layout these methods are not called.
Application-design
I am having a login-page with authentication. After that the user-information is stored in the local-storage and I am using a middleware concept for redirecting (https://markus.oberlehner.net/blog/implementing-a-simple-middleware-with-vue-router/)
To go back I am using this method: this.$router.back()
Expectation
My expected result would be to be able to check in the back-button-component if the back-route will be the login or if there the going-back-stack has only one value left. In that case I would disable my back-button.
Let's say when a user POSTs to /api/signup or /api/signin in an Express app via ajax and on success, calls var socket = io.connect('http://localhost:8080').
Now while remaining logged in if the user navigates to say GET /api/list/:listId in the same app and SAME browser tab, i.e. not requiring multiple socket connections, does the user have to call
io.connect('http://localhost:8080') again when loading /api/list/:listId? Or is there a way to use the same connection across routes, i.e. call io.connect(...) once?
Whenever you refresh page or navigate to another page as whole code will be parsed again, thus socket will be disconnected. To get around this in our project we are using single page website.
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.
I am working in a Mobile project (using Titanium Studio), in which i have the below situation
1) My Mobile app contacts Rails backend to check some data, say check validity of a
user id.
2) I found a way to load web pages in Mobile app, i.e., WebView
3) I could able to load the desired url, ex http://www.mydomain.com/checkuser?uid=20121
which would return data like status:success
But i need to read this data to show whether the response from server is a success or failure, how do i achieve this?
NOTE : The above mentioned scenario is an usecase, but actually what happens is i load a third party url in WebView and when user enters the data and submits, the result will be posted back to my website url.
EDIT : So the process is like below
1) WebView loaded with third party url like http://www.anyapiprovider.com/processdata
2) User will enter set of data in this web page and submits the page
3) The submitted data will be processed by the apiprovider and it returns data to my web page say http://www.mydomain.com/recievedata
This is the reason why i am not directly using GET using HTTPClient
FYI : I tried to fire Ti.APP events right from the actual web page as suggested by few articles, but most of them says this will work only if the file loaded is in local and not a remote file. Reference Link
Please suggest me if my approach has to be improved.
Thanks
If you don't want to follow Josiah's advice, then take a look at the Titanium docs on how to add a webview.addEventListener('load',... event listener and use webview.evalJS() to inject your own code into the third party HTML.
Maybe you can inject code to trap the submit event and fire a Ti event to trigger the downloading of data from your website.
Communication Between WebViews and Titanium - Remote Web Content Section
I found a solution for my problem
1) Load the http://www.mydomain.com/checkuser?uid=20121 in a webview
2) Let user enter and submit data to third party url
3) Recieve the response from third party url and print only <div id="result">status:success</div> in http://www.mydomain.com/recievedata page.
4) Add event listener for the web view as follows
webView.addEventListener('load', function(data)
{
//Add condition to check if the loaded web page has any div with id = result (to check if this is /recievedata page)
alert(webView.evalJS("document.getElementById('result').innerHTML"));
});
The above alert would print the result status:success, read it in webview load event
and take actions in web accordingly.
It works fine for me.
Instead of loading it in a WebView why not just GET it using a HTTP Client? This is much cleaner, and more standards based:
var xhr_get = Ti.Network.createHTTPClient({
onload : function(e) {
// Here is your "status:success" string
var returnValue = this.responseText;
},
onerror : function(e) {
Ti.API.info(this.responseText);
Ti.API.info('CheckUserProgressOnActivity webservice failed with message : ' + e.error);
}
});
xhr_get.open('GET', 'http://www.mydomain.com/checkuser?uid=20121');
xhr_get.send();
It seems the new dialog to tab app to a page -> https://developers.facebook.com/docs/reference/dialogs/add_to_page/ - calls the app url with a GET (redirect_uri?tabs_added[nnnnn]=1) (where nnnn - pageId of page the app is being added to)
I can't find the documentation around whether when the app is removed from the page, the same url will be called with a GET (redirect_uri?tabs_added[nnnnn]=0) ?
I am keen to process the uninstall of the app from the page, if possible. (I have tried to test this, but don't get a trigger to my redirect_uri upon an installed, unlike the one that is called upon an install..)
My question is - whether there is a way to get a delete page callback into the app (when a page uninstalls/deletes the app from the page) ? From the syntax on install GET call (?tabs_added[nnn]=1, it seems that this might have been designed with an intention to call a GET with ?tabs_removed[nnnn]=1 or tabs_added[nnnn]=0 when the app is deleted from the page ?
Empirically, the answer to your question is No. Nothing on my server gets called by Facebook when the Page Tab is removed.
Go to the advanced tab on the facebook app settings, and put a URL of your choice into the 'Deauthorize Callback URL' field. You will receive a callback on that and you need to parse the signed request.
Example in php:
$helper = $fb->getPageTabHelper();
$signedRequest = $helper->getSignedRequest();
if ($signedRequest) {
$payload = $signedRequest->getPayload();
//trace(print_r($payload, true));
$pageId = $payload['profile_id'];
//You can now update your records using $pageId
}