优化替代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> /// </summary>
public ICacheProvider Cache { get; set; } public ICacheProvider Cache { get; set; }
/// <summary>
/// Cookie中定义的键
/// </summary>
public CookieKeyDefine CookieKeys { get; set; }
/// <summary> /// <summary>
/// 通过日志组件和服务集合生成控制器 /// 通过日志组件和服务集合生成控制器
@ -46,7 +42,6 @@ namespace FAuth.Controllers
this.Services = service; this.Services = service;
this.Db = service.GetService<FAuthDb>(); this.Db = service.GetService<FAuthDb>();
this.Cache = service.GetService<ICacheProvider>(); 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); services.AddUserTicketDryptor(UTDO);
//注册api错误处理器 //注册api错误处理器
services.AddScoped<ApiExceptionFilterAttribute>(); 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. // 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 <!DOCTYPE html>
@inject IOptions<CookieKeyDefine> CKD
<!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@ -10,109 +8,140 @@
<link rel="stylesheet" href="~/css/site.css" /> <link rel="stylesheet" href="~/css/site.css" />
</head> </head>
<body> <body>
<header> <div id="layoutBody">
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> <header>
<div class="container"> <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<a class="navbar-brand" asp-controller="Home" asp-action="Index">FAuth统一认证登录平台SSO</a> <div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" <a class="navbar-brand" asp-controller="Home" asp-action="Index">FAuth统一认证登录平台SSO</a>
aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
<span class="navbar-toggler-icon"></span> aria-expanded="false" aria-label="Toggle navigation">
</button> <span class="navbar-toggler-icon"></span>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse"> </button>
<ul class="navbar-nav flex-grow-1"> <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<li class="nav-item"> <ul class="navbar-nav flex-grow-1">
<a class="nav-link text-dark" fajax-updata="main" asp-controller="App" asp-action="Index">应用管理</a> <li class="nav-item">
</li> <a class="nav-link text-dark" fajax-updata="main" asp-controller="App" asp-action="Index">应用管理</a>
<li class="nav-item"> </li>
<a class="nav-link text-dark" fajax-updata="main" asp-controller="RoleGroup" asp-action="Index">角色组管理</a> <li class="nav-item">
</li> <a class="nav-link text-dark" fajax-updata="main" asp-controller="RoleGroup" asp-action="Index">角色组管理</a>
<li class="nav-item"> </li>
<a class="nav-link text-dark" fajax-updata="main" asp-controller="Role" asp-action="Index">角色管理</a> <li class="nav-item">
</li> <a class="nav-link text-dark" fajax-updata="main" asp-controller="Role" asp-action="Index">角色管理</a>
<li class="nav-item"> </li>
<a class="nav-link text-dark" fajax-updata="main" asp-controller="User" asp-action="Index">用户管理</a> <li class="nav-item">
</li> <a class="nav-link text-dark" fajax-updata="main" asp-controller="User" asp-action="Index">用户管理</a>
<li class="nav-item"> </li>
<a class="nav-link text-dark" target="_blank" href="/api">接口文档</a> <li class="nav-item">
</li> <a class="nav-link text-dark" target="_blank" href="/api">接口文档</a>
</ul> </li>
</div> </ul>
<div id="userBar">
<div id="login">
<a asp-controller="user" asp-action="login" fajax-updata="main">登录</a>
</div> </div>
<div id="logout"> <div v-if="!isLogin">
<span>欢迎: <span id="userName"></span></span> <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 asp-controller="user" asp-action="ResetPassword" fajax-updata="main">修改密码</a>
<a href="#" id="logOut">退出</a> <button v-on:click="logOut">退出</button>
</div> </div>
</div> </div>
</div> </nav>
</nav> </header>
</header>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container"> <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> </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/jquery/dist/jquery.min.js"></script>
<script src="~/lib/vue/vue.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.cookie/jquery.cookie-1.4.1.min.js"></script>
<script src="~/lib/jquery.unobtrusive-ajax/jquery.unobtrusive-ajax.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="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script> <script src="~/js/site.js" asp-append-version="true"></script>
<script type="text/javascript"> <script type="text/javascript">
//设置用户key myJs.layout = new Vue({
myJs.userKey = "@CKD.Value.UserKey"; el: "#layoutBody",
data: {
//刷新用户条 isLogin: false,
function RefreshUserBar() { name: "",
var ticket =myJs.getTicket(); userName: "",
if (!ticket) { password: "",
$("#logout").hide(); userKey: myJs.userKey,
$("#login").show(); userTicket: "",
} userInfoUrl: "/api/User/GetUserByTicket",
if (ticket) { userLogout: "/api/User/Logout",
var url = "/api/User/GetUserByTicket"; userLoginUrl: "/api/User/Login",
var data = { ticket: ticket }; },
myJs.get(url, data, function (d) { created() {
$("#userName").html(d.Name); this.userTicket = myJs.getTicket();
$("#logout").show(); if (!this.userTicket) {
$("#login").hide(); isLogin = false;
}, function (c,i,m) { name = "";
$("#logout").hide(); } else {
$("#login").show(); var vmdata = this;
myJs.msg(m); myJs.get(this.userInfoUrl, { ticket: this.userTicket }, function (d) {
myJs.removeTicket(); vmdata.name = d.Name;
}); vmdata.isLogin = true;
} }, function (s, i, m) {
} myJs.msg(m);
myJs.removeTicket(vmdata.userTicket);
function logOut() { });
var ticket = myJs.getTicket(); }
var url = "/api/User/Logout"; },
var data = { ticket: ticket }; methods: {
myJs.post(url, data, function (d) { login() {
myJs.removeTicket(ticket); var vmdata = myJs.layout;
RefreshUserBar(); var _userKey = this.userKey;
}, function (s,i,m) { myJs.post(this.userLoginUrl, { userName: vmdata.userName, password: vmdata.password }, function (d) {
myJs.msg(m); $.cookie(_userKey, d.Ticket);
}); vmdata.userTicket = d.Ticket;
} myJs.get(vmdata.userInfoUrl, { ticket: vmdata.userTicket }, function (d) {
$(function () { vmdata.name = d.Name;
RefreshUserBar(); vmdata.isLogin = true;
$("#logOut").click(function () { $('#loginForm').modal("hide");
logOut(); });
return false; });
},
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> </script>
@RenderSection("Scripts",required: false) @RenderSection("Scripts",required: false)
</body> </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"> <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="text" name="userName" /></label></div>
<div class="form-group"><label>密码:<input class="form-control" type="password" name="password" /></label></div> <div class="form-group"><label>密码:<input class="form-control" type="password" name="password" /></label></div>
@ -10,7 +8,7 @@
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
function loginOnSucc(d) { function loginOnSucc(d) {
var _userKey = "@CKD.Value.UserKey"; var _userKey = myJs.userKey;
$.cookie(_userKey, d.Ticket); $.cookie(_userKey, d.Ticket);
if (RefreshUserBar) RefreshUserBar(); if (RefreshUserBar) RefreshUserBar();
$("#logInForm").hide(); $("#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) { myJs.get = function (url, data, success, error) {
$.ajax({ $.ajax({
url: url, url: url,
@ -38,16 +50,6 @@ myJs.post = function (url, data, success, error) {
myJs.msg = function (msg) { myJs.msg = function (msg) {
alert(msg); alert(msg);
} }
//保存用户凭据的键在_layout视图设置
myJs.userKey = "";
//获取登录的用户票据
myJs.getTicket = function () {
return $.cookie(myJs.userKey);
}
//移除用户登录票据
myJs.removeTicket = function () {
$.removeCookie(myJs.userKey);
}
myJs.url = { myJs.url = {
app: { app: {