翻译 Meteor React 制作 Todos - 09 - 添加用户账户
添加多用户账户Meteor带来了一套账户系统然后顺便还带了用户界面来让你可以在几分钟之内在你的应用中添加多用户功能
为了开启这套账户系统和UI界面,我们需要去添加相关的包。在你的应用目录中,执行下面的命令: meteor add accounts-ui accounts-password 用React来包装一个Blaze组件为了从 // 新文件 AccountsUIWrapper AccountsUIWrapper = React.createClass({ componentDidMount() { // Use Meteor Blaze to render login buttons this.view = Blaze.render(Template.loginButtons,React.findDOMNode(this.refs.container)); },componentWillUnmount() { // Clean up Blaze view Blaze.remove(this.view); },render() { // Just render a placeholder container that will be filled in return <span ref="container" />; } }); 我们只需要在App组件中定义一下就可以包含这个组件了: Hide Completed Tasks </label> <!-- 定义开始 --> <AccountsUIWrapper /> <!-- 定义结束 --> <form className="new-task" onSubmit={this.handleSubmit} > <input type="text" 然后,添加下面的代码来进行账户界面的设定。使用 // 在 simple-todos-react.jsx 文件 if (Meteor.isClient) { // 加入开始 // 这段代码只会在客户端执行 Accounts.ui.config({ passwordSignupFields: "USERNAME_ONLY" }); // 加入结束 Meteor.startup(function () { 添加用户关联功能现在你已经可以创建账户并登录你的应用程序了。这看起来挺牛B的,但是现在的用户登录和退出其实并不是有用的。
为了达成这样的效果,我们得在
首先,在 Tasks.insert({ text: text,createdAt: new Date(),// 当前时间 // 添加开始 owner: Meteor.userId(),// 已登陆用户的_id username: Meteor.user().username // 已登陆用户的用户名 // 添加结束 }); 修改 // App.jsx return { tasks: Tasks.find(query,{sort: {createdAt: -1}}).fetch(),// 添加开始 incompleteCount: Tasks.find({checked: {$ne: true}}).count(),currentUser: Meteor.user() // 添加结束 }; }, 然后,在 // 在App.jsx文件中 <AccountsUIWrapper /> // 修改开始 { this.data.currentUser ? <form className="new-task" onSubmit={this.handleSubmit} > <input type="text" ref="textInput" placeholder="Type to add new tasks" /> </form> : '' } // 修改结束 </header> <ul> 最后,添加语句,使之可以在每个文本之前显示用户名 checked={this.props.task.checked} onClick={this.toggleChecked} /> // 修改开始 <span className="text"> <strong>{this.props.task.username}</strong>: {this.props.task.text} </span> // 修改结束 </li> ); } 在你的浏览器中,添加一些任务,然后你会看到你的用户名出现了。那些这一步骤之前的老任务并不会有附上名字。尽管删掉就是了 现在,用户可以登陆,我们也可以跟踪每一个任务的所属用户。让我们来更深层次的思考一下我们刚刚发现的概念。 自动的账户界面
如果我们的应用有 从已登陆用户中获取信息在你的 在下一个步骤,我们将学习如何在服务器端通过数据验证来使我们的应用更加安全 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |