Spring boot和Vue.js实现基于oauth2授权码模式的认证 (二)

     自上一次写完第一篇文章后，一直没来得及好好整理后面的内容，正好周末得闲继续完成后面的内容。 

Spring boot和Vue.js实现基于oauth2授权码模式的认证 (一)_omage的博客-CSDN博客分享spring boot和vue.js项目中实现oauth2授权码模式的认证，花了一些时间，踩了一些坑，经验整理分享给大家。https://blog.csdn.net/omage/article/details/125933197?spm=1001.2014.3001.5501上篇内容介绍了基本知识和如何跑通spring authorization server的demo，那接下来我们讲讲客户端这块，这里笔者用了一个开源的vue-oidc-client作为客户端，通过oidc协议来与spring authorization server进行通信实现authorization code模式的认证流程。

那先下载客户端源码，跑起来吧

    git clone https://github.com/soukoku/vue-oidc-client

    cd vue-oidc-client/vue2

    npm install

    npm run serve

 在浏览器输入127.0.0.1:8080可以看到如下页面，About(Protected)菜单就是模拟受保护的资源页面。

 接下来的事情就是如何将vue-oidc-client与spring authorization server整合起来跑通authorization code的流程，事实上，笔者跑通这个流程费了不少功夫，包括解决跨域问题、注销问题，这里就不再详细介绍了。

     为了方便读者理解整个流程，笔者整理了一个demo, 正所谓

     talk is cheap, show me the code

 点击下方链接可访问笔者在码云上的项目spring-oauth2-vue-demohttps://gitee.com/bellcode/spring-oauth2-vue-demo 或者克隆代码

git clone https://gitee.com/bellcode/spring-oauth2-vue-demo

按照demo的使用说明配置好后，最终效果如下：

 ​​​​​​​

 ​​​​​​​