Meteor前端登陆系统

yucheng_1995

于 2017-04-07 14:20:13 发布

阅读量895

点赞数 3

分类专栏：技术分享，Meteor 文章标签： meteor sso 开发人员 accounts bootstrap

本文链接：https://blog.csdn.net/yucheng_1995/article/details/69533966

版权

技术分享，Meteor 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文献给为前端工作奋斗的开发者。

效果展示
这里写图片描述

这里写图片描述

我将代码copy出来并不是希望有人原封不动的搬走使用而是希望你能读懂我的编程思想便于理解代码，首先创建Meteor项目网上有大把的教程这里我就不细说了，直接开发项目！本人比较喜欢Sublime Text代码编辑器，故此文所有代码均在此编译器中编写。

打开控制台

meteor create myapp
cd myapp
meteor add ian:accounts-ui-bootstrap-3
meteor add accounts-password
meteor add twbs:bootstrap
meteor add kadira:flow-router
meteor add kadira:blaze-layout
meteor add useraccounts:bootstrap

新建项目中导入以上插件包，向Meteor工程加入用户管理和路由器系统。
在Meteor工程目录下Client文件夹新建HTML文件和JS文件

index.html
<template name="index">
<head>
  <title>yuchengapp</title>
</head>
<body>
	{{> banner}}
	<div class="col-md-6 col-md-offset-3">
	{{> atForm}}
	</div>
</body>
</template>

主页，直接显示登陆界面（{{> atForm}}是导入插件包useraccounts:bootstrap内登陆注册模板样式）

banner.html
<template name="banner">
	<div class="navbar navbar-inverse" role="navigation">
	<div class="navbar-header">
	    <a class="navbar-brand" href="/">Project name</a>
	    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
	     </button>
	     <a class="navbar-brand" href="/gongcheng">work</a>
	 </div>

  <div class="navbar-collapse collapse" id="navigation">
    <ul class="nav navbar-nav navbar-right">
      {{> loginButtons}} <!-- here -->
    </ul>
  </div>
</div>
</template>

导航栏样式可参考官方API> https://atmospherejs.com/ian/accounts-ui-bootstrap-3

Notfound.html
<template name="accessDenied">
	{{>banner}}
  <div class="text-center jumbotron">
  	<h1>404 not found!</h1>
  	<h2>寻找不到当前页面</h2>
  	<p>Page not found! Go to <a href="/">home page</a>.</p>
  </div>
</template>

404错误访问界面，这个页面是为了错误跳转和防止输入项目工程URL地址暴力访问而设计

engineering.html
<template name="engineering">
	{{> banner}}
	<div class="access-denied jumbotron">
	<h2>ok</h2>
	</div>
</template>

保密工程页面，由于项目属于保密级别这里就没复制项目代码而用ok代表成功访问项目

router.js
//主页
FlowRouter.route('/', {
  name: "index",
  action: function() {
    BlazeLayout.render("index", {content: "index"});
  }
});
//404错误页面
FlowRouter.route('/accessDenied', {

	name: "accessDenied",
	action: function() {
		BlazeLayout.render("accessDenied", {content: "accessDenied"});	
	}
});
//判断输入路径是否有效
FlowRouter.notFound = {
    action: function() {
		BlazeLayout.render("accessDenied", {content: "accessDenied"});	
    }
};
//进入项目工程页面，判断是否登陆防止暴力破解
FlowRouter.route('/engineering', {
	name: "engineering",
	triggersEnter: [checkLoggedIn],
	action: function() {
		BlazeLayout.render("engineering", {content: "engineering"});	
	}
});
function checkLoggedIn (ctx, redirect) {  
  if (!Meteor.userId()) {
    redirect('/accessDenied')
  }
}
function redirectIfLoggedIn (ctx, redirect) {  
	if(Meteor.userId()){
	  redirect('/engineering')
	}
}

路由器js配置文件，包含FlowRouter下各种跳转与判断

在Meteor工程目录下lib文件夹新建js文件

Config.js
import { Accounts } from 'meteor/accounts-base';
//*****//
//ian:accounts-ui-bootstrap-3//
//*****//
//https://atmospherejs.com/ian/accounts-ui-bootstrap-3
//通过利用AccountsCommon来禁用帐户创建
if(Meteor.isClient){
	Accounts.config({
	  forbidClientAccountCreation: true
	});
	accountsUIBootstrap3.logoutCallback = function(error) {
	  if(error) console.log("Error:" + error);
	  FlowRouter.go('/');
	}
}
//*****//
//useraccounts:bootstrap//
//*****//
//https://github.com/meteor-useraccounts/core/blob/master/Guide.md
//通过调用，AccountsTemplates.configure(options)您可以指定一组关于视觉外观和行为的选择。
if(Meteor.isClient){
	AccountsTemplates.configure({ 
		forbidClientAccountCreation : true,
	});
	//关于如何检测用户登录
	var mySubmitFunc = function(error, state){
	  if (!error) {
	    if (state === "signIn") {
	      // Successfully logged in
	       FlowRouter.go('/engineering');
	    }
	  }
	};
	AccountsTemplates.configure({
	    onSubmitHook: mySubmitFunc
	});
	//注销时调用atNavButton
	AccountsTemplates.logout();
	var myPostLogout = function(){
    //example redirect after logout
	    FlowRouter.go('/');
	};
	AccountsTemplates.configure({
	    onLogoutHook: myPostLogout
	});
}

表单配置文件，禁用注册功能、登陆跳转功能以及注销回到登陆界面

Languarge.js
if(Meteor.isClient){
	Meteor.startup(function(){
      T9n.setLanguage('zh-CN');
    })
}

语言转换，将英文注册表单转换成中文

在Meteor工程目录下Server文件夹新建js文件来内置管理员（可登陆系统帐号）

user.js
if (Meteor.users.find().count() === 0) {
    Accounts.createUser({
        username: "admin",
        email: "yucheng@admin.com",
        password: "yucheng",
        profile: {
            name: "Admin"
        }
    });
};

在项目运行前，在空的数据库中加入一条用户名为yucheng@admin.com密码为yucheng的数据。
接下来在控制台运行你的项目meteor run 到浏览器查看你的SSO项目吧！
联系邮箱：giggles.yucheng@qq.com