优化替代jq

This commit is contained in:
falcon 2020-05-21 11:16:49 +08:00
parent b9e1ec64d3
commit 4f88f7b782
6 changed files with 135 additions and 130 deletions

View File

@ -31,10 +31,6 @@ namespace FAuth.Controllers
/// 数据缓冲
/// </summary>
public ICacheProvider Cache { get; set; }
/// <summary>
/// Cookie中定义的键
/// </summary>
public CookieKeyDefine CookieKeys { get; set; }
/// <summary>
/// 通过日志组件和服务集合生成控制器
@ -46,7 +42,6 @@ namespace FAuth.Controllers
this.Services = service;
this.Db = service.GetService<FAuthDb>();
this.Cache = service.GetService<ICacheProvider>();
this.CookieKeys = Services.GetService<IOptions<CookieKeyDefine>>().Value;
}
}

View File

@ -1,17 +0,0 @@
using Microsoft.Extensions.Options;
namespace FAuth.Models
{
/// <summary>
/// Cookie中使用的键定义
/// </summary>
public class CookieKeyDefine:IOptions<CookieKeyDefine>
{
public CookieKeyDefine Value => this;
/// <summary>
/// 保存用户凭据的键
/// </summary>
public string UserKey { get; set; } = "_userCK";
}
}

View File

@ -86,8 +86,6 @@ namespace FAuth
services.AddUserTicketDryptor(UTDO);
//注册api错误处理器
services.AddScoped<ApiExceptionFilterAttribute>();
//×¢²áCookie¼üÅäÖÃ
services.Configure<CookieKeyDefine>(this.Configuration.GetSection("CookieKeyDefine"));
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.

View File

@ -1,6 +1,4 @@
@using Microsoft.Extensions.Options
@inject IOptions<CookieKeyDefine> CKD
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
@ -10,109 +8,140 @@
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-controller="Home" asp-action="Index">FAuth统一认证登录平台SSO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" fajax-updata="main" asp-controller="App" asp-action="Index">应用管理</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" fajax-updata="main" asp-controller="RoleGroup" asp-action="Index">角色组管理</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" fajax-updata="main" asp-controller="Role" asp-action="Index">角色管理</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" fajax-updata="main" asp-controller="User" asp-action="Index">用户管理</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" target="_blank" href="/api">接口文档</a>
</li>
</ul>
</div>
<div id="userBar">
<div id="login">
<a asp-controller="user" asp-action="login" fajax-updata="main">登录</a>
<div id="layoutBody">
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-controller="Home" asp-action="Index">FAuth统一认证登录平台SSO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" fajax-updata="main" asp-controller="App" asp-action="Index">应用管理</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" fajax-updata="main" asp-controller="RoleGroup" asp-action="Index">角色组管理</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" fajax-updata="main" asp-controller="Role" asp-action="Index">角色管理</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" fajax-updata="main" asp-controller="User" asp-action="Index">用户管理</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" target="_blank" href="/api">接口文档</a>
</li>
</ul>
</div>
<div id="logout">
<span>欢迎: <span id="userName"></span></span>
<div v-if="!isLogin">
<button data-toggle="modal" data-target="#loginForm">登录</button>
</div>
<div v-if="isLogin">
<span>欢迎:{{name}}</span>
<a asp-controller="user" asp-action="ResetPassword" fajax-updata="main">修改密码</a>
<a href="#" id="logOut">退出</a>
<button v-on:click="logOut">退出</button>
</div>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
</nav>
</header>
<div class="container">
&copy; 2020 - FAuth - <a target="_blank" href="http://39.105.71.191/Falcon/FalconSSO/issues">技术支持</a>
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
</footer>
<div class="modal fade" id="loginForm" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">
用户登录
</h4>
</div>
<div class="modal-body">
<div class="form-group"><label>用户名:<input class="form-control" type="text" v-model="userName" /></label></div>
<div class="form-group"><label>密码:<input class="form-control" type="password" v-model="password" /></label></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" v-on:click="login">登录</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<footer class="border-top footer text-muted">
<div class="container">
&copy; 2020 - FAuth - <a target="_blank" href="http://39.105.71.191/Falcon/FalconSSO/issues">技术支持</a>
</div>
</footer>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/vue/vue.min.js"></script>
<script src="~/lib/jquery.cookie/jquery.cookie-1.4.1.min.js"></script>
<script src="~/lib/jquery.unobtrusive-ajax/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script type="text/javascript">
//设置用户key
myJs.userKey = "@CKD.Value.UserKey";
//刷新用户条
function RefreshUserBar() {
var ticket =myJs.getTicket();
if (!ticket) {
$("#logout").hide();
$("#login").show();
}
if (ticket) {
var url = "/api/User/GetUserByTicket";
var data = { ticket: ticket };
myJs.get(url, data, function (d) {
$("#userName").html(d.Name);
$("#logout").show();
$("#login").hide();
}, function (c,i,m) {
$("#logout").hide();
$("#login").show();
myJs.msg(m);
myJs.removeTicket();
});
}
}
function logOut() {
var ticket = myJs.getTicket();
var url = "/api/User/Logout";
var data = { ticket: ticket };
myJs.post(url, data, function (d) {
myJs.removeTicket(ticket);
RefreshUserBar();
}, function (s,i,m) {
myJs.msg(m);
});
}
$(function () {
RefreshUserBar();
$("#logOut").click(function () {
logOut();
return false;
myJs.layout = new Vue({
el: "#layoutBody",
data: {
isLogin: false,
name: "",
userName: "",
password: "",
userKey: myJs.userKey,
userTicket: "",
userInfoUrl: "/api/User/GetUserByTicket",
userLogout: "/api/User/Logout",
userLoginUrl: "/api/User/Login",
},
created() {
this.userTicket = myJs.getTicket();
if (!this.userTicket) {
isLogin = false;
name = "";
} else {
var vmdata = this;
myJs.get(this.userInfoUrl, { ticket: this.userTicket }, function (d) {
vmdata.name = d.Name;
vmdata.isLogin = true;
}, function (s, i, m) {
myJs.msg(m);
myJs.removeTicket(vmdata.userTicket);
});
}
},
methods: {
login() {
var vmdata = myJs.layout;
var _userKey = this.userKey;
myJs.post(this.userLoginUrl, { userName: vmdata.userName, password: vmdata.password }, function (d) {
$.cookie(_userKey, d.Ticket);
vmdata.userTicket = d.Ticket;
myJs.get(vmdata.userInfoUrl, { ticket: vmdata.userTicket }, function (d) {
vmdata.name = d.Name;
vmdata.isLogin = true;
$('#loginForm').modal("hide");
});
});
},
logOut() {
var ticket = this.userTicket;
var vmdata = myJs.layout;
myJs.post(this.userLogout, { ticket: ticket }, function (d) {
myJs.removeTicket(ticket);
vmdata.name = "";
vmdata.isLogin = false;
});
},
}
});
});
</script>
@RenderSection("Scripts",required: false)
</body>

View File

@ -1,6 +1,4 @@
@inject IOptions<CookieKeyDefine> CKD
<div id="logInForm">
<div id="logInForm">
<form fajax-success="loginOnSucc" fajax-failure="loginOnError" method="post" action="/api/User/Login">
<div class="form-group"><label>用户名:<input class="form-control" type="text" name="userName" /></label></div>
<div class="form-group"><label>密码:<input class="form-control" type="password" name="password" /></label></div>
@ -10,7 +8,7 @@
</div>
<script type="text/javascript">
function loginOnSucc(d) {
var _userKey = "@CKD.Value.UserKey";
var _userKey = myJs.userKey;
$.cookie(_userKey, d.Ticket);
if (RefreshUserBar) RefreshUserBar();
$("#logInForm").hide();

View File

@ -1,4 +1,16 @@
var myJs = {};

var myJs = {}
//保存用户凭据的键
myJs.userKey = "_userCookieKey";
//获取登录的用户票据
myJs.getTicket = function () {
return $.cookie(myJs.userKey);
};
//移除用户登录票据
myJs.removeTicket = function () {
$.removeCookie(myJs.userKey);
};
myJs.get = function (url, data, success, error) {
$.ajax({
url: url,
@ -38,16 +50,6 @@ myJs.post = function (url, data, success, error) {
myJs.msg = function (msg) {
alert(msg);
}
//保存用户凭据的键在_layout视图设置
myJs.userKey = "";
//获取登录的用户票据
myJs.getTicket = function () {
return $.cookie(myJs.userKey);
}
//移除用户登录票据
myJs.removeTicket = function () {
$.removeCookie(myJs.userKey);
}
myJs.url = {
app: {