{"id":1103,"date":"2015-08-04T03:39:23","date_gmt":"2015-08-04T03:39:23","guid":{"rendered":"http:\/\/www.honobono-life.info\/wpeng\/?p=1103"},"modified":"2015-08-04T03:39:23","modified_gmt":"2015-08-04T03:39:23","slug":"changing-the-navigation-links-based-on-login-status-with-angularjs","status":"publish","type":"post","link":"http:\/\/www.honobono-life.info\/wpeng\/changing-the-navigation-links-based-on-login-status-with-angularjs\/","title":{"rendered":"Ruby on Rails Tutorial changing the navigation links based on login status with AngularJS"},"content":{"rendered":"

(1)AngularJS service<\/strong><\/p>\r\n\r\n

$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n

\r\nmyModule.factory("flashService", function ($rootScope) {\r\n  var currentUser = { user: {id: 0} };\r\n  return {\r\n    getUser: function () {\r\n      return currentUser;\r\n    },\r\n    setUser: function (user) {\r\n      currentUser = user;\r\n    }\r\n  };\r\n});<\/pre>\r\n\r\n
(2)AngularJS controller<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\nmyModule.controller("SessionsNewCtrl", function($scope, sessionResource, $location, flashService) {\r\n  $scope.submit = function() {\r\n    function success(response) {\r\n      var user_info = response;\r\n      flashService.setUser(user_info);\r\n      $location.path("\/users\/" + response.user.id);\r\n    }\r\n    function failure(response) {\r\n........\r\n    }\r\n    sessionResource.create($scope.session, success, failure);\r\n  };<\/pre>\r\n\r\n
ref.
\r\nRails "sessions" controller<\/p>\r\n\r\n
\r\n  def create\r\n    user = User.find_by(email: session_params[:email].downcase)\r\n    if user && user.authenticate(session_params[:password])\r\n      remember_token = User.new_remember_token\r\n      cookies.permanent[:remember_token] = remember_token\r\n      user.update_attribute(:remember_token, User.encrypt(remember_token))\r\n      @user_info = {\r\n        user: user\r\n      }\r\n      render json: @user_info, status: :accepted, location: user\r\n    else\r\n      msg = {"password" => ["Invalid email\/password combination"]}\r\n      render json: msg, status: :unprocessable_entity\r\n    end\r\n  end<\/pre>\r\n\r\n
(3)navigation menu<\/strong><\/p>\r\n\r\n
1)AngularJS template view <\/strong><\/p>\r\n\r\n
$ vi app\/views\/layouts\/_header.html.erb<\/p>\r\n\r\n
\r\n<div ng-controller="CollapseDemoCtrl" class="navbar navbar-default navbar-fixed-top" role="navigation">\r\n.........\r\n  <div class="navbar-collapse" collapse="isCollapsed">\r\n    <ul class="nav navbar-nav">\r\n.........\r\n      <li ng-hide="chkSignin().user.id > 0"><%= link_to "Sign in", "\/signin" %><\/li>\r\n      <li ng-show="chkSignin().user.id > 0"><%= link_to "Users", "\/users" %><\/li>\r\n      <li ng-show="chkSignin().user.id > 0" class="dropdown" dropdown>\r\n        <a class="dropdown-toggle" dropdown-toggle>Account<span class="caret"><\/span><\/a>\r\n        <ul class="dropdown-menu">\r\n          <li><%= link_to "Profile", "\/users\/{{chkSignin().user.id}}\/" %><\/li>\r\n          <li><%= link_to "Settings", "\/users\/{{chkSignin().user.id}}\/edit" %><\/li>\r\n          <li role="separator" class="divider"><\/li>\r\n          <li><%= link_to "Sign out", "\/signout" %><\/li>\r\n        <\/ul>\r\n      <\/li><\/pre><\/div>\r\n\r\n
2)AngularJS controller<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\nfunction CollapseDemoCtrl($scope, flashService) {\r\n  $scope.chkSignin = function() {\r\n    return flashService.getUser();\r\n  };\r\n}<\/pre>\r\n\r\n
(4)countermeasure of the browser reload<\/strong><\/p>\r\n\r\n
1)AngularJS run method<\/strong><\/p>\r\n\r\n
\r\nmyModule.run(function (sessionResource,flashService) {\r\n  sessionResource.current_user({}, function(response) {\r\n    if (response.user && response.user.id) {\r\n      var user_info = response;\r\n    } else {\r\n      var user_info = { user: {id: 0} };\r\n    }\r\n    flashService.setUser(user_info);\r\n  });\r\n});\r\n\r\nmyModule.factory("sessionResource", function($resource) {\r\n  return $resource("\/app\/sessions", {},\r\n    {\r\n      'create':  { method: 'POST' },\r\n      'destroy': { method: 'DELETE' },\r\n      'current_user': { method: 'GET', isArray: false }\r\n    }\r\n  );\r\n});\r\n\r\nmyModule.factory("flashService", function ($rootScope) {\r\n  var currentUser = { user: {id: 0} };\r\n  return {\r\n    getUser: function () {\r\n      return currentUser;\r\n    },\r\n    setUser: function (user) {\r\n      currentUser = user;\r\n    }\r\n  };\r\n});<\/pre>\r\n\r\n
2)Rails route<\/strong><\/p>\r\n\r\n
$ vi config\/routes.rb<\/p>\r\n\r\n
  match '\/app\/sessions', to: 'sessions#current_user', via: 'get'<\/p>\r\n\r\n
3)Rails "sessions" controller<\/strong><\/p>\r\n\r\n
$ vi app\/controllers\/sessions_controller.rb<\/p>\r\n\r\n
\r\n  def current_user\r\n    remember_token = User.encrypt(cookies[:remember_token])\r\n    current_user ||= User.find_by(remember_token: remember_token)\r\n    @user_info = {\r\n      user: current_user\r\n    }\r\n    render json: @user_info, status: :accepted\r\n  end<\/pre>","protected":false},"excerpt":{"rendered":"
(1)AngularJS service $ vi app\/assets\/javascripts\/mymodule.js.erb myModule.factory("flashService", function ($rootScope) { var currentUser = { user: {id: 0} }; return { getUser: function () { return currentUser; }, setUser: function (user) { currentUser = user; } }; }); (2)AngularJS controller $ vi app\/assets\/javascripts\/mymodule.js.erb myModule.controller("SessionsNewCtrl", function($scope, sessionResource, $location, flashService) { $scope.submit = function() { function success(response) { var […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[137],"tags":[161,159,160],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1103"}],"collection":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/comments?post=1103"}],"version-history":[{"count":1,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1103\/revisions"}],"predecessor-version":[{"id":1104,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1103\/revisions\/1104"}],"wp:attachment":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/media?parent=1103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/categories?post=1103"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/tags?post=1103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}