尚品汇商城


单点登录

所在位置：

一、单点登录业务介绍

早期单一服务器，用户认证。

缺点：单点性能压力，无法扩展

分布式，SSO(single sign on)模式

解决 ：
用户身份信息独立管理，更好的分布式管理。
可以自己扩展安全策略
跨域不是问题

缺点：
认证服务器访问压力较大。

业务流程图{用户访问业务时，必须登录的流程}{单点登录的过程}

二、认证中心模块

2.1 实现思路

1、 用接收的用户名密码核对后台数据库
2、 核对通过，用uuid生成token
3、 将用户id加载到写入redis，redis的key为token，value为用户id。
4、 登录成功返回token与用户信息，将token与用户信息记录到cookie里面
5、 重定向用户到之前的来源地址。

数据库表：user_info，并添加一条数据！密码应该是加密的！

2.2 搭建认证中心模块service-user

2.2.1 搭建service-user服务

搭建方式如service-item

2.2.2 修改配置pom.xml

2.2.3 添加配置文件

bootstrap.properties

启动类

2.2.4 封装登录接口

2.2.4.1 编写接口

2.2.4.2 Mapper

2.2.4.3 实现类

2.2.4.4 控制器

2.3 在web-all模块添加实现

2.3.1 配置网关server-gateway

2.3.2 在web-all 项目中跳转页面

2.3.3 登录页面

页面资源： \templates\login1.html
login1.html 没有公共头部信息
login.html 有公共头部信息

Html关键代码
<form class=”sui-form”>
<div class=”input-prepend”><span class=”add-on loginname”></span>
<input id=”inputName” type=”text” v-model=”user.loginName” placeholder=”邮箱/用户名/手机号” class=”span2 input-xfat”>
</div>
<div class=”input-prepend”><span class=”add-on loginpwd”></span>
<input id=”inputPassword” type=”password” v-model=”user.passwd” placeholder=”请输入密码” class=”span2 input-xfat”>
</div>
<div class=”setting”>
<label class=”checkbox inline”>
<input name=”m1” type=”checkbox” value=”2” checked=””>
自动登录
</label>
<span class=”forget”>忘记密码？</span>
</div>
<div class=”logined”>
<a class=”sui-btn btn-block btn-xlarge btn-danger” href=”javascript:” @click=”submitLogin()”>登  录</a>
</div>
</form>

<script src=”/js/api/login.js”></script>
<script th:inline=”javascript”>
var item = new Vue({
el: ‘#profile’,

  **data**: {<br />            **originUrl**: [[${originUrl}]],<br />            **user**: {<br />                **loginName**: **''**,<br />                **passwd**: **''**<br />            }<br />      },
  created() {<br />      },
  **methods**: {<br />            submitLogin() {<br />                **_login_**.login(**this**.**user**).then(response => {<br />                    <br />                    if (response.**data**.**code **== 200) {<br />                        _//把token存在cookie中、也可以放在localStorage中_<br />                        **_auth_**.setToken(response.**data**.**data**.**token**)<br />                        **_auth_**.setUserInfo(**_JSON_**.stringify(response.**data**.**data**))
                    **_console_**.log(**"originUrl:"**+**this**.**originUrl**);<br />                        **if**(**this**.**originUrl **== **''**){<br />                            **_window_**.**location**.**href**=**"http://www.gmall.com/index.html"**<br />                            **return **;<br />                        } **else **{<br />                            **_window_**.**location**.**href **= _decodeURIComponent_(**this**.**originUrl**)<br />                  }<br />                    } **else **{<br />                  _alert_(response.**data**.**data**.**message**)<br />               }
            })<br />            }<br />        }<br />   })<br /></**script**>

2.4 头部信息处理

web-all项目：common/header.html，common/head.html
功能：头部信息为公共信息，所有页面都具有相关的头部，所以我们可以单独提取出来，头部页面显示登录状态与关键字搜索等信息

2.4.1 提取头部信息

提取头部信息我们会用到thymeleaf 两个标签：
th:fragment：定义代码块
th:include：将代码块片段包含的内容插入到使用了th:include的HTML标签中
1，定义头部代码块（/common/header.html），关键代码
<div id=”nav-bottom” th:fragment=”header”>

<div class=”nav-top” id=”header”>
…

</div>
2，在其他页面引用头部代码块
<div th:include=”common/header :: header”></div>

2.4.2 头部登录状态处理

思路：登录成功后我们将用户信息写入了cookie，所以我们判断cookie中是否有用户信息，如果有则显示登录用户信息和退出按钮，我们采取vue的渲染方式
关键代码
Header.html 中
<ul class=”fl”>
<li class=”f-item”>尚品汇欢迎您！</li>
<li v-if=”userInfo.nickName == ‘’” class=”f-item”>请<span><a href=”javascript:” @click=”login()”>登录</a></span>　<span><a href=”#”>免费注册</a></span></li>
<li v-if=”userInfo.nickName != ‘’” class=”f-item”><span>{{userInfo.nickName}}</span>　<span><a href=”javascript:” @click=”logout()”>退出</a></span></li>
</ul>

<script type=”text/javascript” src=”/js/plugins/jquery/jquery.min.js”></script>
<script type=”text/javascript” src=”/js/plugins/jquery.cookie.js”></script>
<script src=”/js/plugins/vue.js”></script>
<script src=”/js/plugins/axios.js”></script>
<script src=”/js/auth.js”></script>
<script src=”/js/request.js”></script>
<script src=”/js/api/login.js”></script>
<script th:inline=”javascript”>
var item = new Vue({
el: ‘#header’,

    **data**: {<br />            **userInfo**: {<br />                **nickName**: **''**,<br />                **name**: **''**<br />            }<br />        },

    created() {<br />            **this**.showInfo()<br />        },

    **methods**: {<br />            showInfo() {<br />                _// debugger_<br />                **if**(**_auth_**.getUserInfo()) {<br />                    **this**.**userInfo **= **_auth_**.getUserInfo()<br />                    **_console_**.log(**"--------"**+**this**.**userInfo**.**nickName**)<br />                }<br />            },

       <br />            logout() {<br />                _//debugger_<br />                **_login_**.logout().then(response => {<br />                    **_console_**.log(**"已退出"**)<br />                    **_auth_**.removeToken()<br />                    **_auth_**.removeUserInfo()

                _//跳转页面_<br />                    **_window_**.**location**.**href **= **"/"**<br />                })<br />            }<br />        }<br />    })<br /></**script**>

2.4.3 头部关键字搜索

<div class=”input-append”>
<input id=”keyword” type=”text” v-model=”keyword” class=”input-error input-xxlarge” />
<button class=”sui-btn btn-xlarge btn-danger” @click=”search()” type=”button”>搜索</button>
</div>
<script th:inline=”javascript”>
var item = new Vue({
el: ‘#header’,

    **data**: {<br />            **keyword**: [[${searchParam?.keyword}]],<br />            **userInfo**: {<br />                **nickName**: **''**,<br />                **name**: **''**<br />            }<br />        },

    created() {<br />            **this**.showInfo()<br />        },

    **methods**: {<br />            showInfo() {<br />                _// debugger_<br />                **if**(**_auth_**.getUserInfo()) {<br />                    **this**.**userInfo **= **_auth_**.getUserInfo()<br />                    **_console_**.log(**"--------"**+**this**.**userInfo**.**nickName**)<br />                }<br />            },

        search() {<br />                **if**(**this**.**keyword **== **null**) **this**.**keyword **= **''**<br />                **_window_**.**location**.**href **= **'http://list.gmall.com/search.html?keyword=' **+ **this**.**keyword**<br />            },

        login() {<br />                **_window_**.**location**.**href **= **'http://passport.gmall.com/login.html?originUrl='**+**_window_**.**location**.**href**<br />            },

        logout() {<br />                _//debugger_<br />                **_login_**.logout().then(response => {<br />                    **_console_**.log(**"已退出"**)<br />                    **_auth_**.removeToken()<br />                    **_auth_**.removeUserInfo()

                _//跳转页面_<br />                    **_window_**.**location**.**href **= **"/"**<br />                })<br />            }<br />        }<br />    })<br /></**script**><br />说明：[[${searchParam?.keyword}]]，searchParam为搜索列表的搜索对象，如果存在searchParam对象，显示关键字的值

2.4.4 头部公共js

引用

三、用户认证与服务网关整合

3.1 实现思路

1. 所有请求都会经过服务网关，服务网关对外暴露服务，不管是api异步请求还是web同步请求都走网关，在网关进行统一用户认证
   2. 既然要在网关进行用户认证，网关得知道对哪些url进行认证，所以我们得对url制定规则
   3. Web页面同请求（如：.html），我采取配置白名单的形式，凡是配置在白名单里面的请求都是需要用户认证的（注：也可以采取域名的形式，方式多多）
   4. Api接口异步请求的，我们采取url规则匹配，如：/api/*/auth/，如凡是满足该规则的都必须用户认证
   在网关添加redis相关配置！

3.2 在服务网关添加fillter

server-gateway 项目中添加一个过滤器

| package com.atguigu.gmall.gateway.filter;

@Componentpublic class AuthGlobalFilter implements GlobalFilter{

@Autowired<br />    **private **RedisTemplate **redisTemplate**;

_// 匹配路径的工具类<br />      _**private **AntPathMatcher **antPathMatcher **= **new **AntPathMatcher();

@Value(**"${authUrls.url}"**)<br />    **private **String **authUrls**;<br />    @Override<br />    **public **Mono<Void> filter(ServerWebExchange exchange, GatewayFilterChain chain) {<br />        _// 获取到请求对象<br />        _ServerHttpRequest request = exchange.getRequest();<br />        _// 获取Url<br />        _String path = request.getURI().getPath();<br />        _// 如果是内部接口，则网关拦截不允许外部访问！<br />        _**if **(**antPathMatcher**.match(**"/**/inner/**"**,path)){<br />            ServerHttpResponse response = exchange.getResponse();<br />            **return **out(response,ResultCodeEnum.**_PERMISSION_**);<br />        }<br />        _// 获取用户Id<br />        _String userId = getUserId(request);       _//token被盗用       _**if**(**"-1"**.equals(userId)) {<br />          ServerHttpResponse response = exchange.getResponse();<br />          **return **out(response,ResultCodeEnum.**_PERMISSION_**);<br />       }        _// 用户登录认证<br />        //api接口，异步请求，校验用户必须登录<br />        _**if**(**antPathMatcher**.match(**"/api/**/auth/**"**, path)) {<br />            **if**(StringUtils._isEmpty_(userId)) {<br />                ServerHttpResponse response = exchange.getResponse();<br />                **return **out(response,ResultCodeEnum.**_LOGIN_AUTH_**);<br />            }<br />        }<br />        _// 验证url<br />        _**for **(String authUrl : **authUrls**.split(**","**)) {<br />            _// 当前的url包含登录的控制器域名，但是用户Id 为空！<br />            _**if **(path.indexOf(authUrl)!=-1 && StringUtils._isEmpty_(userId)){<br />                ServerHttpResponse response = exchange.getResponse();<br />                _//303状态码表示由于请求对应的资源存在着另一个URI，应使用重定向获取请求的资源<br />                _response.setStatusCode(HttpStatus.**_SEE_OTHER_**);<br />                response.getHeaders().set(HttpHeaders.**_LOCATION_**,**"http://www.gmall.com/login.html?originUrl="**+request.getURI());<br />                _// 重定向到登录<br />                _**return **response.setComplete();<br />            }<br />        }

    _// 将userId 传递给后端<br />        _**if **(!StringUtils._isEmpty_(userId)){<br />            request.mutate().header(**"userId"**,userId).build();<br />            _// 将现在的request 变成 exchange对象<br />            _**return **chain.filter(exchange.mutate().request(request).build());<br />        }<br />        **return **chain.filter(exchange);<br />    } |

| —- | | 工具类中 AuthContextHolder 有获取用户Id 的方法！
/
获取当前登录用户id
@param **request
__ @return
** **/public static String getUserId(HttpServletRequest request) {
String userId = request.getHeader(“userId”);
return StringUtils.isEmpty(userId) ? “” : userId;
}
|

3.3 在服务网关中判断用户登录状态

在网关中如何获取用户信息：
1，从cookie中获取（如：web同步请求）
2，从header头信息中获取（如：异步请求）
如何判断用户信息合法：
登录时我们返回用户token，在服务网关中获取到token后，我在到redis中去查看用户id，如果用户id存在，则token合法，否则不合法，同时校验ip，防止token被盗用。

3.3.1 取用户信息

3.3.2 输入信息out 方法