如何建立论坛网站,大连建设工程网站,泰安市最新消息,360站长工具seo前言之前文章讲到如何使用Node.jsExpress构建JavaScript客户端#xff0c;实现前后端分离。本节将介绍如何使用Vue实现前后端分离#xff0c;文中介绍Vue的知识比较基础#xff0c;适合新手学习。一、搭建Vue项目前提条件#xff1a;安装nodejs、webpack和vue-cli。这个网上… 前言之前文章讲到如何使用Node.jsExpress构建JavaScript客户端实现前后端分离。本节将介绍如何使用Vue实现前后端分离文中介绍Vue的知识比较基础适合新手学习。 一、搭建Vue项目前提条件安装nodejs、webpack和vue-cli。这个网上很多教程这里不多说。1新建Vue项目Cmd进入创建项目的路径输入vue init webpack VueJS_Client新建vuejs_client的Vue项目安装npm。2安装oidc-client库使用VSCode打开vuejs_client项目所在的文件夹Ctrl ~ 打开控制控制台输入npm install oidc-client3实现自动跳转登录页面在src文件夹中打开HelloWorld.vue文件导入oidc-client模块若在未登录情况在组件创建前跳转登录页面。代码很简单直接调用登录函数。template/templatescriptimport Oidc from oidc-client;var config { authority: http://localhost:5000, client_id: js, redirect_uri: http://localhost:5003/CallBack, response_type: id_token token, scope: openid profile api1, post_logout_redirect_uri: http://localhost:5003/};var mgr new Oidc.UserManager(config);export default { beforeCreate() { mgr.signinRedirect(); }};/script4指定重定向页面可以看到上面的配置一旦用户登录到IdentityServerCallBack就是指定的redirect_uri页面。在components文件夹中新建CallBack.vue文件调用UserManager函数实现页面跳转。 template /templatescriptimport Oidc from oidc-client;new Oidc.UserManager() .signinRedirectCallback() .then(function() { window.location /#/Home; }) .catch(function(e) { }); export default{}/script5编写Home组件在CallBack中重定向了Home组件此时可以获取到登录用户的属性和调用接口所需的access_token等。template div button clickapi调用API/button button clicklogout退出登录/button pre{{res}}/pre /div/templatescriptimport Oidc from oidc-client;var config { authority: http://localhost:5000, client_id: js, redirect_uri: http://localhost:5003/CallBack, response_type: id_token token, scope: openid profile api1, post_logout_redirect_uri: http://localhost:5003/};var mgr new Oidc.UserManager(config);export default { name: Home, data() {return { res: My Home }; }, methods: { api() {var thatthis; mgr.getUser().then(function(user) {var url http://localhost:5001/identity;var xhr new XMLHttpRequest(); xhr.open(GET, url); xhr.onload function() { that.res (xhr.status, JSON.parse(xhr.responseText)) }; xhr.setRequestHeader(Authorization, Bearer user.access_token); xhr.send(); }); }, logout() { mgr.signoutRedirect(); } }, mounted() {var thatthis; mgr.getUser().then(function(user) {if (user) {// this.res (User logged in, user.profile);注意闭包 that.res (User logged in, user.profile); } else { that.res (User not logged in); } }); }};/scriptstyle scoped/style6最后在Router中添加新建的路由并修改程序启动端口为5003二、修改授权服务配置资源服务器允许跨域调用API1修改授权服务配置在AuthServer项目打开Config.cs文件在GetClients中添加JavaScript客户端配置// JavaScript Clientnew Client { ClientId js, ClientName JavaScript Client, AllowedGrantTypes GrantTypes.Implicit, AllowAccessTokensViaBrowser true, RedirectUris { http://localhost:5003/CallBack }, PostLogoutRedirectUris { http://localhost:5003 }, AllowedCorsOrigins { http://localhost:5003 }, AllowedScopes { IdentityServerConstants.StandardScopes.OpenId, IdentityServerConstants.StandardScopes.Profile,api1 }, }2在资源服务配置允许跨域调用api在ResourceAPI项目打开Startup.cs文件中的ConfigureServices方法配置CORS允许Ajax调用从http://localhost:5003调用http://localhost:5001的Web API。//JS-allow Ajax calls to be made from http://localhost:5003 to http://localhost:5001. services.AddCors(options {//this defines a CORS policy called default options.AddPolicy(default, policy { policy.WithOrigins(http://localhost:5003) .AllowAnyHeader() .AllowAnyMethod(); }); });在Configure方法中将CORS中间件添加到管道中 //JS-Add the CORS middleware to the pipeline in Configure: app.UseCors(default);3添加测试用的api接口添加IdentityController控制器[Route([controller])]public class IdentityController : ControllerBase { [Authorize(Roles admin)] [HttpGet]public IActionResult Get() {return new JsonResult(from c in User.Claims select new { c.Type, c.Value }); }}4测试运行AuthServer项目运行ResourceAPI项目。在VSCode终端输入npm run dev打开浏览器http://localhost:5003/ 自动跳转到登录页面账号:zhubingjian 密码:123 登录。跳转到Home页面并获取到用户的属性信息。 调用API满足授权条件成功获取数据。 总结本节代码尽量简单化了并有加太多东西进去。关于IdentityServer4的相关知识和教程可以看我前面几篇博客都有详细的教程。授权服务和资源服务源码地址: https://github.com/Bingjian-Zhu/Mvc-HybridFlow.gitVue Demo源码地址https://github.com/Bingjian-Zhu/Identity_Vue_Client原文地址https://www.cnblogs.com/FireworksEasyCool/p/10576911.html.NET社区新闻深度好文欢迎访问公众号文章汇总 http://www.csharpkit.com
