In my backbone application I trying to tidy my URLs up a little bit, I am wanting something that looks like this,
http://develpoment.dev/dashboard
htttp://development.dev/project/create
What is happening at the moment is that if I navigate too, http://develpoment.dev/#dashboard then the hash gets stripped out and the page loads as I would expect it too.
However if I directly access http://develpoment.dev/dashboard then I get a 404 page not found, this it not great for users who want to bookmark or return an URL later, have I set something up incorrectly?
Here is how I initialize my Router.
$(function(){
App.Routes.Application = new App.Routes.app();
Backbone.history.start({ pushState: true });
});
404 is expected result as you dont have any page under http://develpoment.dev/dashboard URL
In case of single page application, all URLs under site domain should be mapped to one page, the bootstrap page you start application with.
Related
I'm working on a node-red project with uibuilder node.
It's basically [html, css, js(with vue)] pages.
I want to make the login authorization part where each user opens the allowed pages only.
How can I achieve that? by tokens? by permitting direct access to pages using URL?
P.S. I'm new to this part of web and I tried searching but couldn't find what I need.
I searched a lot, all was dead-end until I found this question
Detect if page was redirected or loaded directly(Javascript)
Instead of getting into trouble with tokens, and checking at each page if it is valid or not.
I permitted accessing any page (except the login) by the URL. If you want to access a page, it's only by redirecting.
I achieved that by checking a variable at page loading if the page has history or not. if no history, it is redirected to the login page.
I added this part to my vue-js file:
window.onload = function() {
if(document.referrer == "") window.location.href = "http://localhost:1880/Login/login.html";
}
P.S. If all the Internet said preventing accessing by URL is impossible, Don't be disappointed. Search more, because it's actually possible. 😉 😉
I am building a simple MVP of an idea in jQuery and Rails 5. I would like to avoid introducing a front end framework for the purposes of the simple project.
In order to let users navigate with the forward/back button I made different templates with "routes" such as /profile and /network as follows.
I use popstate to change which handlebars template I render (in the onPopState function):
window.addEventListener('popstate', onPopState, true);
I use pushState when I navigate to a new page (I navigate just by swapping which handlebars template and event handlers I am showing):
history.pushState({page: 'home'}, 'Page Title | Home', app.client + '/home');
I have most of the functionality working. The only problem is that if I refresh the page or type in a URL like myapp.com/profile in the address bar directly I get logged out and/or see an error, either a 404 if the app is deployed, or a Cannot GET /profile if I am running on localhost.
I think the issue is that I need to implement some kind of routing on the front end, but I am not sure how / which to use. Are there simple ways to implement this with just jQuery / JavaScript?
Thanks!
I've seen a lot of sites recently that allow you to navigate to different pages (seemingly) without reloading the page. For example:
https://www.protest.eu/shop/category/men/
I know I can do it via AJAX by just replacing the content and changing the url, but that has drawbacks. Mainly, if you're trying to track page visits, they won't show up for pages that are navigated to in this way... because you're not actually visiting the page.
Is there a better way to achieve this?
I know I can do it via AJAX
That's how you do it.
if you're trying to track page visits, they won't show up for pages that are navigated to in this way
How you fix that depends on what you are using to track page visits.
If, for example, you were using Google Analytics then you would do something like:
function ajaxLoadHandler() {
var content = this.responseText;
var url = "/bar.html";
update_content_with(content);
history.pushState({ raw_content: content }, "page 2", url);
ga('send', {
hitType: 'pageview',
page: url
});
}
This approach is called as SPA (single page application). The dowbacks you mentioned earlier can handled by some Js methods and event listener(histrory.pushstate, onpopstate... ref:https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate.)
Some of JS framework s (like React,Backbone,CanJS,SpineJS,BatmanJS,EmberJS,AngularJS, etc) help to achive SPA sloution. These framework provides routing module to achive browser history functionality also these provides view, model, controller, collection WTC.,. You may choose one of these framework which suits for your business need.
Normally with JavaScript you can use the following to manipulate the history, but it does not work.
Example: What I want to achieve is to go to /clients/:id and then when I go back, I want to go to /blog/, doesn't matter which page i was on before.
$scope.changeView = function(clientId){
history.pushState({}, null, '/#/blog');
$location.path('/client/' + clientId);
};
However, this does not work in Angular.
Any idea how this could be solved?
As I am confused about what your question is.. (Are you just trying to find an Angular way of manipulating the history? Or are you trying to redirect?)
Something that may be of interest to you is the $location service on AngularJS.
I just used history.pushState(), null, '/aboutus') while on a page within my app, clicked a link, then went back and it seemed to load that '/aboutus' link just fine, so long as your Angular app is configured to route that path somewhere.
I've just finished developing my first Backbone app and I detected a small quirk with the Router which I don't seem to be able to fix.
My routes look like this:
routes: {
'': 'index',
'jobs/:id': 'viewJob',
'*default': 'notFound'
}
It works fine when serving the app from the server root, but it doesn't when I serve it from a subfolder. In that case I always get the default route.
I though adding the root param to the backbone history would do the trick so I added it like this:
Backbone.history.start({ pushState: true, root: '/subdir/' });
With this the app seems to load as expected but the Router is automatically adding the root to all the routes and it ends up being duplicated, so when I first visit the website:
http://mysite.com/subdir/
It loads the app and changes it to this:
http://mysite.com/subdir/subdir/
This makes the app to break when reloading the page or using the browser back button as that route doesn't really exist.
What would be the approach to avoid this? I don't want to hardcode the folder name in the routes as it might change or be served from the root.
UPDATE: I've just realized I was adding the duplicated folder name myself using router.navigate somewhere in my code. I just removed it and everything works as expected.
Just a small guess.. do you really want pushState turned on? This can cause problems on reload if the server is not setup to serve out of the new directory.