接上一篇: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: falseurgent: falseuser_id: Meteor.userId() // 保存用戶_id字段....后面代碼省略

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

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

Done！ ^_^

總結

以上是生活随笔為你收集整理的Meteor项目实战 -- Next 0.0.2的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。