Meteor項目實戰 -- Next 0.0.2

接上一篇:Meteor項目實戰 -- Next 0.0.1

Get things done , and do Next

Next 0.0.2版的目標是帳戶系統，並把任務與用戶關聯起來。

首先增長登陸所需路由，修改router.coffee，增長以下代碼：

Router.route('/login', ->
  @render("Login")
)

增長對應模板，在client/templates/ 下新建login.html，內容以下：

<template name="Login">
    welcome login
</template>

Meteor提供了方便好用的帳戶系統。帳戶系統的基本功能位於accounts-base包，但一般都會選擇直接引入--登陸服務提供包，例如：

• accounts-password
• accounts-facebook
• accounts-github
• accounts-google
• accounts-meetup
• accounts-twitter
• accounts-weibo

引入這些包時會自動引入accounts-base包。

使用第三方登陸不只能讓用戶省去繁瑣的註冊流程，還能大大簡化開發。考慮到國情，原本打算使用accounts-weibo，可是體驗了以後發現，微博的接入流程還須要審覈一堆材料，因此咱們這裏選擇引入accounts-github。

meteor add accounts-github

觀察控制檯的輸出，咱們發現自動添加的依賴包有：

accounts-base          added, version 1.2.0
accounts-github        added, version 1.0.4
accounts-oauth         added, version 1.1.5
github                 added, version 1.1.3
localstorage           added, version 1.0.3
oauth                  added, version 1.1.4
oauth2                 added, version 1.1.3
service-configuration  added, version 1.0.4

而後在 mongo shell 中 show collections; 發現同時多了兩個集合：

meteor_accounts_loginServiceConfiguration
meteor_oauth_pendingCredentials

從集合的名字推斷：大概是用來保存第三方登陸配置和憑證的。

使用第三方登陸服務以前，都須要進行一些配置。最簡單的方式就是引入另外一個包 accounts-ui,它給每個登陸服務提供一個配置嚮導。

meteor add accounts-ui

而後修改login.html，爲

<template name="Login">
    {{> loginButtons}}
</template>

{{> loginButtons}}是accounts-ui包提供的登陸UI。

訪問登陸頁，會出現一個configure github login的按鈕，點擊它，會出現一個嚮導，按照步驟提示進行配置，而後點擊save configuration。

這時候按鈕變成了sign in with github。

在mongo shell中執行：

db.meteor_accounts_loginServiceConfiguration.find()

能夠看到剛纔的配置就保存到了這個集合中。

接下來，咱們點擊sign in with github。就會跳到github的受權頁面，點擊贊成，就會跳轉回登陸頁，按鈕變成了sign out，說明已經成功登陸

利用第三方登陸服務成功登陸後，Meteor會自動在users集合中新建對應的用戶，到mongo shell中查詢，

db.users.find().pretty()

輸出結果相似：

到目前爲止一切順利。接下來調整一些細節，當未登陸用戶訪問時，自動跳轉到登陸頁。修改router.coffee，增長下面代碼：

Router.onBeforeAction(->
  if !Meteor.userId()
    this.redirect('/login')
  this.next()
)

如今咱們有了帳戶系統，而後就要把任務和用戶關聯起來。

首先，新建任務時，同時保存用戶的_id字段，修改home.coffee

Template.home.events
  'submit .form-create-task': (e)->
    e.preventDefault()
    $form = $(e.currentTarget)
    task =
      name: $form.find('input[name=name]').val()
      create_time: new Date()
      important: false
      urgent: false
      user_id: Meteor.userId() // 保存用戶_id字段

      ....後面代碼省略

最後，修改發佈，只發布當前用戶的任務，修改publish.coffee,

Meteor.publish('tasks', ->
  Task.find({user_id: @userId})
)

Done！ ^_^