Restrict access to a page in Gatsby.js to logged in users - reactjs

On my gatsby.js static site, I want to restrict access to my pages/dashboard page using client-side authentication. The plug-in, gatsby-plugin-meta-redirect says that I can create a redirect with this...
createRedirect({ fromPath: '/old-url', toPath: '/new-url', isPermanent: true });
...but I'm not sure where to place that in my code. I'm assuming gatsby-node.js, but I'm not sure how.
I want to do something like this,
if (user.loggedIn) {
// redirect to '/dashboard'
} else {
// redirect to '/'
}
This is assuming that the state of user is available throughout the site. Is this possible?
Also, in the gatsby-plugin-meta-redirect docs, it states that this plugin should be put last in the array in gatsby-config.js. But I already have gatsby-plugin-netlify placed last. Would that be a problem?

What you can do is give a programmatic, non-direct access to the /dashboard page using navigateTo in Link.
See this issue.

Related

Generating random URL in AngularJS

I wish to see if it is possible to generate a random link each time an admin visits the admin page.
for example: instead of having: "".com/admin, there would be "".com/a93k, "".com/9dik. The page stays the same but just so the end-user can't access the page from the address bar.
Thanks as I am new and do not know how I can implement this.
In .config of your app put something like
window.adminHash = Math.random().toString(36).substring(2,6);
In your routing
url: '/' + window.adminHash
Then you can use "window.adminHash" if you want to redirect to your route, which will change every time you refresh the page
You can add www.test-example.com/admin/{provide some ID}
And If there isn't ID provide discard that URL, if it is provided you can make discrimination.

Comparing $location.path() to route with params not working

I have an app where I must allow non logged in users to access some pages, such as forget password form, registration etc.
if(!Authentication.isLoggedIn()){
if($location.path() === '/thanks'){
// Allow
} else {
// Redirect to login
$location.path('/login');
}
}
I am using ngRoute and I have a route with a param in it (/lostpassword/:token) but I can't find a way to compare it properly to allow it the same way I can for /thanks
So to clarify, I am not looking for the value of :token, I just want to be able to tell when the route /lostpassword/:token is being viewed.
I am really new to angular and I'm hoping it is just a small syntax issue. Any help would be appreciated.
In case you want to know if the url contains a keyword you can do:
var path = $location.path();
if (path.split('/').indexOf('some') > -1){
// do something
}
Angular $location docs
EDIT
You can also use angular router which can get a url template. this is the preferred way to handle routes within you application.

Angular: Multiple templates for single URL?

I have a 'manager' panel which is used by users of all roles (admin and user currently).
The main problem is that I want to restrict any admin HTML views from being loaded (I will do this as a simple check on the backend, and will return 401 if they're not authorized to load the template). There are a bunch of things in the HTML I need to hide.
My problem is that means there are now 2 views for several sections.
So /settings while a user will show an entirely different view as /settings when you're an admin.
The controller will actually be shared, because the controller code is very close, but the HTML is very different.
I am currently using angular-router but I also checked out ui-router, I just have no clue how to structure either. I've spent a good bit of time looking at UI router, and while it is amazing looking I don't know the best way to lay it out.
I have about 10 routes/views that need to belong to each role, that will be different.
How about emitting a global variable says the current user is admin:
<script type="text/javascript">window.isAdmin = true</script>
And then in the route definition check for that variable:
...
when('/setting', {
templateUrl: isAdmin ? 'templates/admin/setting.html' : 'templates/user/setting.html',
controller: 'SettingController'
})
...
The other way around is to have the web server serve different view for the same view URL, based on user's role. As I understand you can do this already, right?
app.get('/templates/setting.html', function(req, res) {
if (user.role === "admin") {
res.send(...);
} else {
res.send(...);
}
});

AngularJS - How can I do a redirect with a full page load?

I want to do a redirect that does a full page reload so that the cookies from my web server are refreshed when the page loads. window.location = "/#/Next" and window.location.href = "/#/Next" don't work, they do an Angular route which does not hit the server.
What is the correct way to make a full server request within an Angular controller?
For <a> tags:
You need to stick target="_self" on your <a> tag
There are three cases where AngularJS will perform a full page reload:
Links that contain target element
Example: link
Absolute links that go to a different domain
Example: link
Links starting with '/' that lead to a different base path when base is defined
Example: link
Using javascript:
The $location service allows you to change only the URL; it does not allow you to reload the page. When you need to change the URL and reload the page or navigate to a different page, please use a lower level API: $window.location.href.
See:
https://docs.angularjs.org/guide/$location
https://docs.angularjs.org/api/ng/service/$location
We had the same issue, working from JS code (i.e. not from HTML anchor). This is how we solved that:
If needed, virtually alter current URL through $location service. This might be useful if your destination is just a variation on the current URL, so that you can take advantage of $location helper methods. E.g. we ran $location.search(..., ...) to just change value of a querystring paramater.
Build up the new destination URL, using current $location.url() if needed. In order to work, this new one had to include everything after schema, domain and port. So e.g. if you want to move to:
http://yourdomain.example/YourAppFolder/YourAngularApp/#/YourArea/YourAction?culture=en
then you should set URL as in:
var destinationUrl = '/YourAppFolder/YourAngularApp/#/YourArea/YourAction?culture=en';
(with the leading '/' as well).
Assign new destination URL at low-level: $window.location.href = destinationUrl;
Force reload, still at low-level: $window.location.reload();
After searching and giving hit and trial session I am able to solove it by first specifying url like
$window.location.href = '/#/home/stats';
then reload
$window.location.reload();
I had the same issue. When I use window.location, $window.location or even <a href="..." target="_self"> the route does not refresh the page. So the cached services are used which is not what I want in my app. I resolved it by adding window.location.reload() after window.location to force the page to reload after routing. This method seems to load the page twice though. Might be a dirty trick, but it does the work. This is how I have it now:
$scope.openPage = function (pageName) {
window.location = '#/html/pages/' + pageName;
window.location.reload();
};
Try this
$window.location.href="#page-name";
$window.location.reload();

Cakephp One login function / multiple login views

I have one website with a login system. However, I would like the login view to be different depending on what link has the user used to get to the login screen.
Something like:
function login ($from_page = null) {
if (isset($page)) $this->render('login_alternate_view');
else $this->render('login'); //default login view
}
And then each of the login views (login.ctp, login_alternate_view.ctp) would have the login form plus other stuff specific to each one.
Is this possible in some way? I've already tried something like the example above but it doesn't work...
So I fixed it using GET variables:
/users/login?some_var=some_value
And then in the login function I catch that variable's value with:
$this->params['url']['some_var'];
This way I can "customize" my login function depending on the link the user uses
First show the real error message you're talking in the comments about and not "something".
I guess that you want the current page url the user is on when he logs in? How to you generate the modal? Request the whole form via ajax or is it embedded in the page you're on? If it's embedded I would put the current page url the user is on in a hidden field "from" in the login form and check that.

Resources