从电子邮件链接重定向到 AngularJS 状态答案

【问题标题】：Redirect to an AngularJS state from email link从电子邮件链接重定向到 AngularJS 状态
【发布时间】：2018-07-11 21:09:18
【问题描述】：

我想将我的用户从电子邮件链接重定向到我的 Angular 应用程序中的某个状态。我的应用是单页应用，这意味着我不能简单地将用户重定向到状态的 URL。

到目前为止，我尝试使用URL参数：

这个链接，假设去菜单，在邮件中发送给用户 => https://mywebsite.com/index?state=menu

在我的应用程序的主控制器中，当用户登陆时，我使用 以下 JavaScript 函数：

 function checkRedirectFromEmail(){
    var stateParam = getParam('state');
    $rootScope.gotoState('tabs.'+stateParam);
    // $location.url($location.path()); // I TRIED THIS, NO SUCCESS
    // $location.search('state', null); // I TRIED THIS TOO, NO SUCCESS
}

函数getParam()在哪里：

 function getParam(param) {
    var vars = {};
    window.location.href.replace( location.hash, '' ).replace( 
        /[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
        function( m, key, value ) { // callback
            vars[key] = value !== undefined ? value : '';
        }
    );
    if ( param ) {
        return vars[param] ? vars[param] : null;    
    }
    return vars;
}

而函数gotoState()是：

 $rootScope.gotoState = function(stateName) {
    $state.go(stateName, {}, { location: false } ); 
};

最后，以下是我的路由逻辑中的重要状态和参数：

 $stateProvider
  .state('tabs', {
    url: "/tabs",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })
  .state('tabs.index', {
    url: "/",
    cache:false,
    views: {
      'index-tab': {
        templateUrl: "home.html"
      }
    }
  })
})
$urlRouterProvider.otherwise("/");

目前，用户被重定向，但：

我必须在我的 URL 中添加“索引”，以便读取我的参数（通常只是 https://mywebsite.com/#/）。
URL 仍然是“脏”的参数，我想清除参数。我尝试了几种方法（参见我的代码），但都无法正常工作。

我的问题：

除了使用 URL 参数将用户从电子邮件重定向到我的应用程序的某个状态之外，还有其他重定向用户的方法吗？ 如果没有，有没有办法让它比我目前拥有的更干净（清除url参数，不必在url中添加“索引”）？

感谢您的帮助。

【问题讨论】：

以更好的方式使用角度组件通过链接传递值
使用 html5Mode(true) 去除哈希并在你的 html 文件中添加
你使用的是angularjs默认路由器还是ui-router？
@praveenkumars 我试过了，但现在我的 URL 参数无法识别（我的 getParam 函数返回 null）。
@VarvarigosEmmanouil 我正在使用 Ionic 框架和 ui-router。

标签： javascript angularjs email redirect

【解决方案1】：

我在参与的一个项目中实现的这个（电子邮件重定向到特定应用程序状态）的一个很好的解决方案是使用 ui-router 支持的状态参数来处理这个问题。

$stateProvider
    .state('home', {
        url: "/home/:redirectTo",
        templateUrl: 'home.html',
        controller: function ($stateParams, $state) {

            // based on redirectTo stateparam you can redirect the user to
            // the desired state. eg: /home/results -> results page
            $state.go($stateParams.redirectTo, {} );
        }
    })

因此，当您单击“myIp/home/results”之类的链接时，如果状态结果包含 url 'results'，则会将您重定向到 myIp/results。

【讨论】：