How to set up conditional login redirects in a multi-dashboard system based on user role and form location? Answered

• 

  Marc Hudson

  • September 16, 2023 07:36

  Here’s some Javascript/jQuery I use to redirect forms to any page after submit. It’s a common approach but I’ve added some functions to check it’s an XXS safe querystring value, that it’s a relative URI and a form submit listener. Let me know if it doesn’t work because I’ve simplified it a bit.

  If you add a ?destination=foo querystring on the login page, it should redirect on form submit/page reload.

  // (Add this to the global "Head code" in site Settings):
  
  var sanitizeHTML = (str) => {
          // Remove <script> tags and content.
          return str.replace(/<script\b[^>]*>(?:[^<]*<\/script>|[^>]*\/>)|<script\b[^>]*\/?>/gi, '')
          // Remove attributes that start with "on" (eg: "onclick")
          .replace(/(\s*<[^>]*)(\s+(on\w+)="[^"]*")/gi, '$1')
          // Remove instances of "javascript:".
          .replace(/javascript:/gi, '');
          
          // Short version:
          // /javascript:|<script\b[^>]*>(?:[^<]*<\/script>|[^>]*\/>)|<script\b[^>]*\/?>|\s*on\w+="[^"]*"/gi
      };
  
  // Get/set querystring.
      var getSetQuerystring = (params = '', includePath) => {
          const urlObj = new URL(window.location.href);
  
          // Set params it's an Object.
          if (typeof(params) === "object") {
              $.each(params, function(key, value) {
                  urlObj.searchParams.set(sanitizeHTML(key), sanitizeHTML(value));
              });
              // Return path and querystring or just the string.
              return includePath ? urlObj.pathname + urlObj.search : urlObj.search;
          }
  
          // Get value.
          return sanitizeHTML(urlObj.searchParams.get(params));
      };
  
  // On DOM ready.
      $(function() {
      // Redirect user after form submit.
          $('form').on('submit', function() {
              var redir = getSetQuerystring('destination');
              if (redir) {
                  localStorage.setItem('wf_redirect', '/'+redir);// Relative URIs only.
              }
          });
      });
  
  
  // Redirect user.
  var redir = localStorage.getItem('wf_redirect');
  if (redir) {
    // Test String for absolute URL (http://, https:// or //).
    if (!/^(http:\/\/|https:\/\/|\/\/+)/.test(redir)){
    	localStorage.removeItem('wf_redirect');
  	window.location = redir;
    }
  }

  Here’s the original concept that I used: https://finsweet.com/hacks-jquery/36 It’s just a matter of setting the URI path in the local storage, which I do with a querystring.
  0
• 

  Duncan from Memberstack

  • September 20, 2023 18:21

  Thanks for that code + explanation Marc Hudson! 🙏
  
  Jamie Debnam, you can also set the redirect directly on the login form. It will completely override any plan level or default login redirects, so be careful if you decide to go that route.  

  0

Please sign in to leave a comment.