1. Day10 购物车渲染

2. SpringSecurity权限控制

10. Day10 购物车渲染 - 图1

用户每次访问微服务的时候，先去oauth2.0服务登录，登录后再访问微服务网关，微服务网关将请求转发给其他微服务处理。

由于我们项目使用了微服务，任何用户都有可能使用任意微服务，此时我们需要控制相关权限，例如：普通用户角色不能使用用户的删除操作，只有管理员才可以使用,那么这个时候就需要使用到SpringSecurity的权限控制功能了。

2.1. 角色权限控制

在每个微服务中，需要获取用户的角色，然后根据角色识别是否允许操作指定的方法，Spring Security中定义了四个支持权限控制的表达式注解，分别是@PreAuthorize、@PostAuthorize、@PreFilter和@PostFilter。其中前两者可以用来在方法调用前或者调用后进行权限检查，后两者可以用来对集合类型的参数或者返回值进行过滤。在需要控制权限的方法上，我们可以添加@PreAuthorize注解，用于方法执行前进行权限检查，校验用户当前角色是否能访问该方法。

  1. 开启@PreAuthorize
    在changgou-user-service的ResourceServerConfig类上添加@EnableGlobalMethodSecurity注解，用于开启@PreAuthorize的支持，
    10. Day10 购物车渲染 - 图2

  2. 方法权限控制
    在changgoug-service-user微服务的com.changgou.user.controller.UserController类的delete()方法上添加权限控制注解@PreAuthorize
    10. Day10 购物车渲染 - 图3

  3. 测试接口 由于我们令牌用户不是admin无法进行服务访问
    10. Day10 购物车渲染 - 图4

如果希望一个方法能被多个角色访问，置:@PreAuthorize("hasAnyAuthority('admin','user')")

如果希望一个类都能被多个角色访问，在类上配置:@PreAuthorize("hasAnyAuthority('admin','user')")

3. 购物车

购物车分为用户登录购物车和未登录购物车操作，国内知名电商京东用户登录和不登录都可以操作购物车，如果用户不登录，操作购物车可以将数据存储到Cookie，用户登录后购物车数据可以存储到Redis中，再将之前未登录加入的购物车合并到Redis中即可。

淘宝天猫则采用了另外一种实现方案，用户要想将商品加入购物车，必须先登录才能操作购物车。

我们今天实现的购物车是天猫解决方案，即用户必须先登录才能使用购物车功能。

10. Day10 购物车渲染 - 图5

我们实现的是用户登录后的购物车，用户将商品加入购物车的时候，直接将要加入购物车的详情存入到Redis即可。每次查看购物车的时候直接从Redis中获取。

用户登录后将商品加入购物车，需要存储商品详情以及购买数量，购物车详情表如下：

changgou_order数据中tb_order_item表：

  1. CREATE TABLE `tb_order_item` (
  2.   `id` varchar(20) COLLATE utf8_bin NOT NULL COMMENT 'ID',
  3.   `category_id1` int(11) DEFAULT NULL COMMENT '1级分类',
  4.   `category_id2` int(11) DEFAULT NULL COMMENT '2级分类',
  5.   `category_id3` int(11) DEFAULT NULL COMMENT '3级分类',
  6.   `spu_id` varchar(20) COLLATE utf8_bin DEFAULT NULL COMMENT 'SPU_ID',
  7.   `sku_id` bigint(20) NOT NULL COMMENT 'SKU_ID',
  8.   `order_id` bigint(20) NOT NULL COMMENT '订单ID',
  9.   `name` varchar(200) COLLATE utf8_bin DEFAULT NULL COMMENT '商品名称',
  10.   `price` int(20) DEFAULT NULL COMMENT '单价',
  11.   `num` int(10) DEFAULT NULL COMMENT '数量',
  12.   `money` int(20) DEFAULT NULL COMMENT '总金额',
  13.   `pay_money` int(11) DEFAULT NULL COMMENT '实付金额',
  14.   `image` varchar(200) COLLATE utf8_bin DEFAULT NULL COMMENT '图片地址',
  15.   `weight` int(11) DEFAULT NULL COMMENT '重量',
  16.   `post_fee` int(11) DEFAULT NULL COMMENT '运费',
  17.   `is_return` char(1) COLLATE utf8_bin DEFAULT NULL COMMENT '是否退货',
  18.   PRIMARY KEY (`id`),
  19.   KEY `item_id` (`sku_id`),
  20.   KEY `order_id` (`order_id`)
  21. ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

3.1. 添加购物车

10. Day10 购物车渲染 - 图6

  1. 定义feign接口
    在changou_service_goods_api下的feign包的SkuFeign添加方法
    1. @GetMapping("/sku/{id}")
    2. public Result findById(@PathVariable String id);
  1. 订单服务添加依赖 changgou_service_order添加依赖
    1. <dependency>
    2.  <groupId>com.changgou</groupId>
    3.  <artifactId>changgou_service_goods_api</artifactId>
    4.  <version>1.0-SNAPSHOT</version>
    5. </dependency>
  1. 在 changgou_service_order启动类添加开启feign扫描
    1. @EnableFeignClients(basePackages = "com.changgou.goods.feign")
  1. 订单服务新建cartService 实现添加购物车 ```java package com.changgou.order.service;

import java.util.Map;

public interface CartService {

  1. //添加购物车
  2. void addCart(String skuId, Integer num, String username);
  4. //查询购物车数据
  5. Map list(String username);

}

  3. 5. 
  4. impl
  5. ```java
  6. package com.changgou.order.service.impl;
  8. import com.changgou.goods.feign.SkuFeign;
  9. import com.changgou.goods.feign.SpuFeign;
  10. import com.changgou.goods.pojo.Sku;
  11. import com.changgou.goods.pojo.Spu;
  12. import com.changgou.order.pojo.OrderItem;
  13. import com.changgou.order.service.CartService;
  14. import org.springframework.beans.factory.annotation.Autowired;
  15. import org.springframework.data.redis.core.RedisTemplate;
  16. import org.springframework.stereotype.Service;
  18. import java.util.HashMap;
  19. import java.util.List;
  20. import java.util.Map;
  22. @Service
  23. public class CartServiceImpl implements CartService {
  25.     private static final String CART = "cart_";
  27.     @Autowired
  28.     private RedisTemplate redisTemplate;
  30.     @Autowired
  31.     private SkuFeign skuFeign;
  33.     @Autowired
  34.     private SpuFeign spuFeign;
  36.     @Override
  37.     public void addCart(String skuId, Integer num, String username) {
  38.         //1.查询redis中相对应的商品信息
  39.         OrderItem orderItem = (OrderItem) redisTemplate.boundHashOps(CART + username).get(skuId);
  40.         if (orderItem != null) {
  41.             //2.如果当前商品在redis中存在 则更新商品的数量和价格
  42.             orderItem.setNum(orderItem.getNum() + num); //更新数量
  43.             orderItem.setMoney(orderItem.getNum() * orderItem.getPrice()); //总价
  44.             orderItem.setPayMoney(orderItem.getNum() * orderItem.getPrice()); //实付金额
  45.         } else {
  46.             //3.如果当前商品在redis中不存在 将商品添加到redis中
  47.             Sku sku = skuFeign.findById(skuId).getData();
  48.             Spu spu = spuFeign.findSpuById(sku.getSpuId()).getData();
  50.             //封装orderItem
  51.             orderItem = this.sku2OrderItem(sku, spu, num);
  52.         }
  53.         //3.将orderItem添加到redis中
  54.         redisTemplate.boundHashOps(CART + username).put(skuId, orderItem);
  55.     }
  57.     //查询购物车列表数据
  58.     @Override
  59.     public Map list(String username) {
  60.         Map map = new HashMap();
  61.         List<OrderItem> orderItemList = redisTemplate.boundHashOps(CART + username).values();
  62.         map.put("orderItemList", orderItemList);
  63.         //商品的总数量和总价格
  64.         Integer totalNum = 0;
  65.         Integer totalMoney = 0;
  67.         for (OrderItem orderItem : orderItemList) {
  68.             totalMoney += orderItem.getMoney();
  69.             totalNum += orderItem.getNum();
  70.         }
  72.         map.put("totalNum",totalNum);
  73.         map.put("totalMoney",totalMoney);
  74.         return map;
  75.     }
  77.     private OrderItem sku2OrderItem(Sku sku, Spu spu, Integer num) {
  78.         OrderItem orderItem = new OrderItem();
  79.         orderItem.setCategoryId1(spu.getCategory1Id());
  80.         orderItem.setCategoryId2(spu.getCategory2Id());
  81.         orderItem.setCategoryId3(spu.getCategory3Id());
  82.         orderItem.setSpuId(spu.getId());
  83.         orderItem.setSkuId(sku.getId());
  84.         orderItem.setName(sku.getName());
  85.         orderItem.setPrice(sku.getPrice());
  86.         orderItem.setNum(num);
  87.         orderItem.setMoney(orderItem.getPrice() * num);
  88.         orderItem.setPayMoney(orderItem.getPrice() * num);
  89.         orderItem.setImage(sku.getImage());
  90.         orderItem.setWeight(sku.getWeight() * num);
  91.         return orderItem;
  92.     }
  93. }
  1. controller ```java package com.changgou.order.controller;

import com.changgou.entity.Result; import com.changgou.entity.StatusCode; import com.changgou.order.service.CartService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*;

import java.util.Map;

@RestController @RequestMapping(“/cart”) public class CartController {

  1. @Autowired
  2. private CartService cartService;
  4. @GetMapping("/addCart")
  5. public Result addCart(@RequestParam("skuId") String skuId, @RequestParam("num") Integer num) {
  6.     //动态获取当前人信息
  8.     String username = "itheima";
  9.     cartService.addCart(skuId, num, username);
  10.     return new Result(true, StatusCode.OK, "加入购物车成功");
  11. }
  13. @GetMapping("/list")
  14. public Map list() {
  15.     //动态获取当前用户信息
  16.     String username = "itheima";
  17.     Map map = cartService.list(username);
  18.     return map;
  19. }

}

  4. <a name="d2a9589e"></a>
  5. # 4. 购物车渲染
  7. ![](https://cdn.jsdelivr.net/gh/Iekrwh/images/md-images/1558260759149.png#alt=1558260759149)
  9. 接着我们实现一次购物车列表操作。因为存的时候是根据用户名往Redis中存储用户的购物车数据的，所以我们这里可以将用户的名字作为key去Redis中查询对应的数据。
  11. 在changgou_web中搭建订单购物车微服务工程`changgou_web_order`，该工程主要实现购物车和订单的渲染操作。 pom.xml依赖
  13. ```xml
  14. <dependencies>
  15.     <dependency>
  16.         <groupId>com.changgou</groupId>
  17.         <artifactId>changgou_service_order_api</artifactId>
  18.         <version>1.0-SNAPSHOT</version>
  19.     </dependency>
  20.     <dependency>
  21.         <groupId>com.changgou</groupId>
  22.         <artifactId>changgou_common</artifactId>
  23.         <version>1.0-SNAPSHOT</version>
  24.     </dependency>
  25.     <dependency>
  26.         <groupId>org.springframework.boot</groupId>
  27.         <artifactId>spring-boot-starter-thymeleaf</artifactId>
  28.     </dependency>
  29. </dependencies>

application

  1. server:
  2.   port: 9011
  3. spring:
  4.   application:
  5.     name: order-web
  6.   main:
  7.     allow-bean-definition-overriding: true   #当遇到同样名字的时候，是否允许覆盖注册
  8.   thymeleaf:
  9.     cache: false
  10. eureka:
  11.   client:
  12.     service-url:
  13.       defaultZone: http://127.0.0.1:6868/eureka
  14.   instance:
  15.     prefer-ip-address: true
  16. feign:
  17.   hystrix:
  18.     enabled: true
  19.   client:
  20.     config:
  21.       default:   #配置全局的feign的调用超时时间  如果 有指定的服务配置 默认的配置不会生效
  22.         connectTimeout: 60000 # 指定的是 消费者 连接服务提供者的连接超时时间 是否能连接  单位是毫秒
  23.         readTimeout: 80000  # 指定的是调用服务提供者的 服务 的超时时间（）  单位是毫秒
  24. #hystrix 配置
  25. hystrix:
  26.   command:
  27.     default:
  28.       execution:
  29.         timeout:
  30.           #如果enabled设置为false，则请求超时交给ribbon控制
  31.           enabled: true
  32.         isolation:
  33.           strategy: SEMAPHORE
  34.           thread:
  35.             # 熔断器超时时间，默认：1000/毫秒
  36.             timeoutInMilliseconds: 80000
  37. #请求处理的超时时间
  38. ribbon:
  39.   ReadTimeout: 4000
  40.   #请求连接的超时时间
  41.   ConnectTimeout: 3000

启动类 OrderWebApplication

  1. package com.changgou.web.order;
  3. import org.springframework.boot.SpringApplication;
  4. import org.springframework.boot.autoconfigure.SpringBootApplication;
  5. import org.springframework.cloud.netflix.eureka.EnableEurekaClient;
  6. import org.springframework.cloud.openfeign.EnableFeignClients;
  8. @SpringBootApplication
  9. @EnableEurekaClient
  10. @EnableFeignClients(basePackages = {"com.changgou.order.feign"})
  11. public class OrderWebApplication {
  12.     public static void main(String[] args) {
  13.         SpringApplication.run(OrderWebApplication.class,args);
  14.     }
  15. }

静态资源拷贝

10. Day10 购物车渲染 - 图7

4.1. 购物车列表渲染

在changgou_service_order_api中添加CartFeign接口，并在接口中创建添加购物车和查询购物车列表

  1. package com.changgou.order.feign;
  3. import com.changgou.entity.Result;
  4. import org.springframework.cloud.openfeign.FeignClient;
  5. import org.springframework.web.bind.annotation.GetMapping;
  6. import org.springframework.web.bind.annotation.RequestParam;
  8. import java.util.Map;
  10. @FeignClient(name = "order")
  11. public interface CartFeign {
  12.     @GetMapping("/cart/addCart")
  13.     Result addCart(@RequestParam("skuId") String skuId, @RequestParam("num") Integer num);
  15.     @GetMapping("/cart/list")
  16.     public Map list();
  18. }

在changgou_web_order中创建com.changgou.order.controller.CartController

  1. package com.changgou.web.order.controller;
  4. import com.changgou.entity.Result;
  5. import com.changgou.entity.StatusCode;
  6. import com.changgou.order.feign.CartFeign;
  7. import org.springframework.beans.factory.annotation.Autowired;
  8. import org.springframework.stereotype.Controller;
  9. import org.springframework.ui.Model;
  10. import org.springframework.web.bind.annotation.GetMapping;
  11. import org.springframework.web.bind.annotation.RequestMapping;
  12. import org.springframework.web.bind.annotation.ResponseBody;
  13. import org.springframework.web.bind.annotation.RestController;
  15. import java.util.HashMap;
  16. import java.util.Map;
  18. @Controller
  19. @RequestMapping("/wcart")
  20. public class CartController {
  23.     @Autowired
  24.     private CartFeign cartFeign;
  26.     //查询购物车
  27.     @GetMapping("/list")
  28.     public String list(Model model) {
  29.         Map map = cartFeign.list();
  30.         model.addAttribute("items", map);
  31.         return "cart";
  32.     }
  34.     //添加购物车
  35.     @GetMapping("/add")
  36.     @ResponseBody
  37.     public Result<Map> add(String id, Integer num) {
  38.         cartFeign.addCart(id, num);
  39.         Map map = cartFeign.list();
  40.         return new Result<>(true, StatusCode.OK, "添加购物车成功", map);
  41.     }
  42. }

4.2. 前端页面

第126行

  1.             <!-- vue loadlist -->
  2.             <div class="cart-list" v-for="item in items.orderItemList" :key="item.index">
  3.                 <ul class="goods-list yui3-g">
  4.                     <li class="yui3-u-1-24">
  5.                         <input type="checkbox" name="chk_list" id="" value="" />
  6.                     </li>
  7.                     <li class="yui3-u-6-24">
  8.                         <div class="good-item">
  9.                             <div class="item-img">
  10.                                 <img :src="item.image" />
  11.                             </div>
  12.                             <div class="item-msg"></div>
  13.                         </div>
  14.                     </li>
  15.                     <li class="yui3-u-5-24">
  16.                         <div class="item-txt">{{item.name}}</div>
  17.                     </li>
  18.                     <li class="yui3-u-1-8">
  19.                         <span class="price">{{item.price}}</span>
  20.                     </li>
  21.                     <li class="yui3-u-1-8">
  22.                         <a href="javascript:void(0)" @click="add(item.skuId,-1)" class="increment mins">-</a>
  23.                         <input autocomplete="off" type="text" v-model="item.num" @blur="add(item.skuId,item.num)" value="1" minnum="1" class="itxt" />
  24.                         <a href="javascript:void(0)" @click="add(item.skuId,1)" class="increment plus">+</a>
  25.                     </li>
  26.                     <li class="yui3-u-1-8">
  27.                         <span class="sum">{{item.num*item.price}}</span>
  28.                     </li>
  29.                     <li class="yui3-u-1-8">
  30.                         <a href="#none">删除</a>
  31.                         <br />
  32.                         <a href="#none">移到收藏</a>
  33.                     </li>
  34.                 </ul>
  35.             </div>
  37.         </div>
  38.     </div>
  39. </div>
  40. <div class="cart-tool">
  41.     <div class="select-all">
  42.         <input class="chooseAll" type="checkbox"  />
  43.         <span>全选</span>
  44.     </div>
  45.     <div class="option">
  46.         <a href="#none">删除选中的商品</a>
  47.         <a href="#none">移到我的关注</a>
  48.         <a href="#none">清除下柜商品</a>
  49.     </div>
  50.     <div class="money-box">
  51.         <div class="chosed">已选择
  52.             <span>{{items.totalNum}}</span>件商品</div>
  53.         <div class="sumprice">
  54.                 <span>
  55.                     <em>总价（不含运费） ：</em>
  56.                     <i class="summoney">¥{{items.totalMoney}}</i>
  57.                 </span>
  58.             <span>
  59.                     <em>已节省：</em>
  60.                     <i>-¥20.00</i>
  61.                 </span>
  62.         </div>
  63.         <div class="sumbtn">
  64.             <a class="sum-btn" href="getOrderInfo.html" target="_blank">结算</a>
  65.         </div>
  66.     </div>
  67. </div>

vue实例

  1. <script th:inline="javascript">
  2.     var app = new Vue({
  3.         el: '#app',
  4.         data() {
  5.             return {
  6.                 items: [[${items}]]
  7.             }
  8.         },
  9.         methods:{
  10.             add:function (skuId, num) {
  11.                 axios.get("/api/wcart/add?id="+skuId+"&num="+num).then(function (response) {
  12.                     if (response.data.flag){
  13.                         app.items=response.data.data
  14.                     }
  15.                 })
  16.             }
  17.         }
  18.     })
  19. </script>

4.3. 购物车渲染服务、订单服务对接网关

添加两个微服务路由

  1. #订单微服务
  2. - id: changgou_order_route
  3.   uri: lb://order
  4.   predicates:
  5.     - Path=/api/cart/**,/api/categoryReport/**,/api/orderConfig/**,/api/order/**,/api/orderItem/**,/api/orderLog/**,/api/preferential/**,/api/returnCause/**,/api/returnOrder/**,/api/returnOrderItem/**
  6.   filters:
  7.     - StripPrefix=1
  8. #购物车订单渲染微服务
  9. - id: changgou_order_web_route
  10.   uri: lb://order-web
  11.   predicates:
  12.     - Path=/api/wcart/**,/api/worder/**
  13.   filters:
  14.     - StripPrefix=1

4.4. 如果商品数小于0则删除商品

我们发现个问题，就是用户将商品加入购物车，无论数量是正负，都会执行添加购物车，如果数量如果<=0，应该移除该商品的。

修改changgou-service-order的com.changgou.order.service.impl.CartServiceImpl的add方法

添加以下逻辑代码

  1.     if (orderItem.getNum() <= 0) {
  2.         //删除改商品
  3.         redisTemplate.boundHashOps(CART + username).delete(skuId);
  4.         return;
  5.     }

方法完整代码

  1. @Override
  2. public void addCart(String skuId, Integer num, String username) {
  3.     //1.查询redis中相对应的商品信息
  4.     OrderItem orderItem = (OrderItem) redisTemplate.boundHashOps(CART + username).get(skuId);
  5.     if (orderItem != null) {
  6.         //2.如果当前商品在redis中存在 则更新商品的数量和价格
  7.         orderItem.setNum(orderItem.getNum() + num); //更新数量
  8.         if (orderItem.getNum() <= 0) {
  9.             //删除改商品
  10.             redisTemplate.boundHashOps(CART + username).delete(skuId);
  11.             return;
  12.         }
  13.         orderItem.setMoney(orderItem.getNum() * orderItem.getPrice()); //总价
  14.         orderItem.setPayMoney(orderItem.getNum() * orderItem.getPrice()); //实付金额
  15.     } else {
  16.         //3.如果当前商品在redis中不存在 将商品添加到redis中
  17.         Sku sku = skuFeign.findById(skuId).getData();
  18.         Spu spu = spuFeign.findSpuById(sku.getSpuId()).getData();
  20.         //封装orderItem
  21.         orderItem = this.sku2OrderItem(sku, spu, num);
  22.     }
  23.     //3.将orderItem添加到redis中
  24.     redisTemplate.boundHashOps(CART + username).put(skuId, orderItem);
  25. }

5. 订单服务对接oauth

将公钥复制到 changgou_service_order

添加依赖

  1. <dependency>
  2.     <groupId>org.springframework.cloud</groupId>
  3.     <artifactId>spring-cloud-starter-oauth2</artifactId>
  4. </dependency>

在order包下新建config包 创建 ResourceServerConfig

  1. package com.changgou.order.config;
  3. import org.springframework.context.annotation.Bean;
  4. import org.springframework.context.annotation.Configuration;
  5. import org.springframework.core.io.ClassPathResource;
  6. import org.springframework.core.io.Resource;
  7. import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity;
  8. import org.springframework.security.config.annotation.web.builders.HttpSecurity;
  9. import org.springframework.security.oauth2.config.annotation.web.configuration.EnableResourceServer;
  10. import org.springframework.security.oauth2.config.annotation.web.configuration.ResourceServerConfigurerAdapter;
  11. import org.springframework.security.oauth2.provider.token.TokenStore;
  12. import org.springframework.security.oauth2.provider.token.store.JwtAccessTokenConverter;
  13. import org.springframework.security.oauth2.provider.token.store.JwtTokenStore;
  15. import java.io.BufferedReader;
  16. import java.io.IOException;
  17. import java.io.InputStreamReader;
  18. import java.util.stream.Collectors;
  20. @Configuration
  21. @EnableResourceServer
  22. //开启方法上的PreAuthorize注解
  23. @EnableGlobalMethodSecurity(prePostEnabled = true, securedEnabled = true)
  24. public class ResourceServerConfig extends ResourceServerConfigurerAdapter {
  26.     //公钥
  27.     private static final String PUBLIC_KEY = "public.key";
  29.     /**** 定义JwtTokenStore
  30.      * @param jwtAccessTokenConverter
  31.      * @return
  32.      */
  33.     @Bean
  34.     public TokenStore tokenStore(JwtAccessTokenConverter jwtAccessTokenConverter) {
  35.         return new JwtTokenStore(jwtAccessTokenConverter);
  36.     }
  38.     /***
  39.      * 定义JJwtAccessTokenConverter
  40.      * @return
  41.      */
  42.     @Bean
  44.     public JwtAccessTokenConverter jwtAccessTokenConverter() {
  45.         JwtAccessTokenConverter converter = new JwtAccessTokenConverter();
  46.         converter.setVerifierKey(getPubKey());
  47.         return converter;
  48.     }
  49.     /**
  50.      * 获取非对称加密公钥 Key
  51.      * @return 公钥 Key
  52.      */
  53.     private String getPubKey() {
  54.         Resource resource = new ClassPathResource(PUBLIC_KEY);
  55.         try {
  56.             InputStreamReader inputStreamReader = new InputStreamReader(resource.getInputStream());
  57.             BufferedReader br = new BufferedReader(inputStreamReader);
  58.             return br.lines().collect(Collectors.joining("\n"));
  59.         } catch (IOException ioe) {
  60.             return null;
  61.         }
  62.     }
  64.     /***
  65.      * Http安全配置，对每个到达系统的http请求链接进行校验
  66.      * @param http
  67.      * @throws Exception
  68.      */
  69.     @Override
  70.     public void configure(HttpSecurity http) throws Exception {
  71.         //所有请求必须认证通过
  72.         http.authorizeRequests()
  73.                 .anyRequest().
  74.                 authenticated();    //其他地址需要认证授权
  75.     }
  76. }

5.1. 微服务间认证

10. Day10 购物车渲染 - 图8

因为微服务之间并没有传递头文件，所以我们可以定义一个拦截器，每次微服务调用之前都先检查下头文件，将请求的头文件中的令牌数据再放入到header中，再调用其他微服务即可。

10. Day10 购物车渲染 - 图9

在changgou_common服务中创建一个com.changgou.interceptor.FeignInterceptor拦截器，并将所有头文件数据再次加入到Feign请求的微服务头文件中

  1. package com.changgou.interceptor;
  3. import feign.RequestInterceptor;
  4. import feign.RequestTemplate;
  5. import org.springframework.stereotype.Component;
  6. import org.springframework.web.context.request.RequestAttributes;
  7. import org.springframework.web.context.request.RequestContextHolder;
  8. import org.springframework.web.context.request.ServletRequestAttributes;
  10. import javax.servlet.http.HttpServletRequest;
  11. import java.util.Enumeration;
  13. @Component
  15. public class FeignInterceptor implements RequestInterceptor {
  18.     @Override
  19.     public void apply(RequestTemplate requestTemplate) {
  20.         //传递令牌
  21.         RequestAttributes requestAttributes = RequestContextHolder.getRequestAttributes();
  22.         if (requestAttributes != null) {
  23.             HttpServletRequest request = ((ServletRequestAttributes) requestAttributes).getRequest();
  24.             if (request != null) {
  25.                 Enumeration<String> headerNames = request.getHeaderNames();
  26.                 while (headerNames.hasMoreElements()) {
  27.                     String headerName = headerNames.nextElement();
  28.                     if ("authorization".equals(headerName)) {
  29.                         String headerValue = request.getHeader(headerName); //jwt令牌
  31.                         //传递令牌
  32.                         requestTemplate.header(headerName, headerValue);
  34.                     }
  35.                 }
  36.             }
  37.         }
  38.     }
  39. }

更改changgou_order_web启动类，添加拦截器声明

  1. @Bean
  2. public FeignInterceptor feignInterceptor() {
  3.     return new FeignInterceptor();
  4. }

6. 动态获取当前登陆人

在changgou-common工程中引入鉴权包

  1. <!--鉴权-->
  2. <dependency>
  3.     <groupId>io.jsonwebtoken</groupId>
  4.     <artifactId>jjwt</artifactId>
  5.     <version>0.9.0</version>
  6.     <scope>provided</scope>
  7. </dependency>

添加资源中的TokenDecode工具类到changgou-service-order微服务config包下，用于解密令牌信息

  1. package com.changgou.order.config;
  3. import com.alibaba.fastjson.JSON;
  4. import org.springframework.core.io.ClassPathResource;
  5. import org.springframework.core.io.Resource;
  6. import org.springframework.security.core.context.SecurityContextHolder;
  7. import org.springframework.security.jwt.Jwt;
  8. import org.springframework.security.jwt.JwtHelper;
  9. import org.springframework.security.jwt.crypto.sign.RsaVerifier;
  10. import org.springframework.security.oauth2.provider.authentication.OAuth2AuthenticationDetails;
  11. import org.springframework.util.StringUtils;
  13. import java.io.BufferedReader;
  14. import java.io.IOException;
  15. import java.io.InputStreamReader;
  16. import java.util.Map;
  17. import java.util.stream.Collectors;
  19. public class TokenDecode {
  20.     //公钥
  21.     private static final String PUBLIC_KEY = "public.key";
  23.     private static String publickey="";
  25.     /***
  26.      * 获取用户信息
  27.      * @return
  28.      */
  29.     public Map<String,String> getUserInfo(){
  30.         //获取授权信息
  31.         OAuth2AuthenticationDetails details = (OAuth2AuthenticationDetails) SecurityContextHolder.getContext().getAuthentication().getDetails();
  32.         //令牌解码
  33.         return dcodeToken(details.getTokenValue());
  34.     }
  36.     /***
  37.      * 读取令牌数据
  38.      */
  39.     public Map<String,String> dcodeToken(String token){
  40.         //校验Jwt
  41.         Jwt jwt = JwtHelper.decodeAndVerify(token, new RsaVerifier(getPubKey()));
  43.         //获取Jwt原始内容
  44.         String claims = jwt.getClaims();
  45.         return JSON.parseObject(claims,Map.class);
  46.     }
  49.     /**
  50.      * 获取非对称加密公钥 Key
  51.      * @return 公钥 Key
  52.      */
  53.     public String getPubKey() {
  54.         if(!StringUtils.isEmpty(publickey)){
  55.             return publickey;
  56.         }
  57.         Resource resource = new ClassPathResource(PUBLIC_KEY);
  58.         try {
  59.             InputStreamReader inputStreamReader = new InputStreamReader(resource.getInputStream());
  60.             BufferedReader br = new BufferedReader(inputStreamReader);
  61.             publickey = br.lines().collect(Collectors.joining("\n"));
  62.             return publickey;
  63.         } catch (IOException ioe) {
  64.             return null;
  65.         }
  66.     }
  67. }

将该工具类以bean的形式声明到order服务中

  1. package com.changgou;
  3. import com.changgou.order.config.TokenDecode;
  4. import org.springframework.boot.SpringApplication;
  5. import org.springframework.boot.autoconfigure.SpringBootApplication;
  6. import org.springframework.cloud.netflix.eureka.EnableEurekaClient;
  7. import org.springframework.cloud.openfeign.EnableFeignClients;
  8. import org.springframework.context.annotation.Bean;
  9. import tk.mybatis.spring.annotation.MapperScan;
  11. @SpringBootApplication
  12. @EnableEurekaClient
  13. @MapperScan(basePackages = {"com.changgou.order.dao"})
  14. @EnableFeignClients(basePackages = "com.changgou.goods.feign")
  15. public class OrderApplication {
  16.     public static void main(String[] args) {
  17.         SpringApplication.run( OrderApplication.class);
  18.     }
  20.     @Bean
  21.     public TokenDecode tokenDecode(){
  22.         return new TokenDecode();
  23.     }
  24. }

在CartController中注入TokenDecode，并调用TokenDecode的getUserInfo方法获取用户信息，代码如下：

注入TokenDecode：

  1. @Autowired
  2. private TokenDecode tokenDecode;
  1.     @GetMapping("/addCart")
  2.     public Result addCart(@RequestParam("skuId") String skuId, @RequestParam("num") Integer num) {
  3.         //动态获取当前人信息
  5. //        String username = "itheima";
  6.         String username = tokenDecode.getUserInfo().get("username");
  7.         cartService.addCart(skuId, num, username);
  8.         return new Result(true, StatusCode.OK, "加入购物车成功");
  9.     }
  11.     @GetMapping("/list")
  12.     public Map list() {
  13.         //动态获取当前用户信息
  14. //        String username = "itheima";
  15.         String username = tokenDecode.getUserInfo().get("username");
  16.         Map map = cartService.list(username);
  17.         return map;
  18.     }

7. 页面配置

7.1. 未登录时登录跳转

在用户没有登录的情况下，直接访问购物车页面,返回的只是个错误状态码，这个毫无意义，我们应该重定向到登录页面，让用户登录，我们可以修改网关的头文件，让用户每次没登录的时候，都跳转到登录页面。

修改changgou-gateway-web的com.changgou.filter.AuthorizeFilter

  1. private static final String LOGIN_URL = "http://localhost:8001/api/oauth/toLogin";
  3.  //跳转登陆页面
  4.     private Mono<Void> toLoginPage(String loginUrl, ServerWebExchange exchange) {
  5.         ServerHttpResponse response = exchange.getResponse();
  6.         response.setStatusCode(HttpStatus.SEE_OTHER); //302
  7.         response.getHeaders().set("Location", loginUrl);
  8.         return response.setComplete();
  9.     }

完整代码

  1. package com.changgou.web.gateway.filter;
  3. import com.changgou.web.gateway.service.AuthService;
  4. import org.apache.commons.lang.StringUtils;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.cloud.gateway.filter.GatewayFilterChain;
  7. import org.springframework.cloud.gateway.filter.GlobalFilter;
  8. import org.springframework.core.Ordered;
  9. import org.springframework.http.HttpStatus;
  10. import org.springframework.http.server.reactive.ServerHttpRequest;
  11. import org.springframework.http.server.reactive.ServerHttpResponse;
  12. import org.springframework.stereotype.Component;
  13. import org.springframework.web.server.ServerWebExchange;
  14. import reactor.core.publisher.Mono;
  16. @Component
  17. public class AuthFilter implements GlobalFilter, Ordered {
  19.     private static final String LOGIN_URL = "http://localhost:8001/api/oauth/toLogin";
  21.     @Autowired
  22.     private AuthService authService;
  25.     @Override
  26.     public Mono<Void> filter(ServerWebExchange exchange, GatewayFilterChain chain) {
  27.         ServerHttpRequest request = exchange.getRequest();
  28.         ServerHttpResponse response = exchange.getResponse();
  29.         //1.判断请求路径是否为登陆请求 如果是 则直接放行
  30.         String path = request.getURI().getPath();
  31.         if ("/api/oauth/login".equals(path) || !URLFilter.hasAuthorize(path)) {
  32.             //直接放行
  33.             return chain.filter(exchange);
  34.         }
  35.         //2.不是登陆请求 从cookie中获取jti的值 如果值不存在 拒绝本次访问
  36.         String jti = authService.getJtiFromCookie(request);
  37.         if (StringUtils.isEmpty(jti)) {
  38.             //为空 拒绝访问
  39. //            response.setStatusCode(HttpStatus.UNAUTHORIZED);
  40. //            return response.setComplete();
  41.             //跳转到登陆页面
  42.             return this.toLoginPage(LOGIN_URL, exchange);
  43.         }
  46.         //3.如果cookie中有jti的值 从redis中获取jwt的值 如果值不存在 拒绝本次访问
  47.         String jwt = authService.getJwtFromRedis(jti);
  48.         if (StringUtils.isEmpty(jwt)) {
  49.             //过期或不存在 拒绝访问
  50. //            response.setStatusCode(HttpStatus.UNAUTHORIZED);
  51. //            return response.setComplete();
  52.             //跳转到登陆页面
  53.             return this.toLoginPage(LOGIN_URL, exchange);
  54.         }
  56.         //对当前的请求对象进行增强 让它携带令牌的信息
  57.         request.mutate().header("Authorization", "Bearer " + jwt);
  58.         return chain.filter(exchange);
  59.     }
  61.     //跳转登陆页面
  62.     private Mono<Void> toLoginPage(String loginUrl, ServerWebExchange exchange) {
  63.         ServerHttpResponse response = exchange.getResponse();
  64.         response.setStatusCode(HttpStatus.SEE_OTHER); //302
  65.         response.getHeaders().set("Location", loginUrl);
  66.         return response.setComplete();
  67.     }
  69.     @Override
  70.     public int getOrder() {
  71.         return 0;
  72.     }
  73. }

7.1.1. 登录成功跳转原地址

刚才已经实现了未登录时跳转登录页，但是当登录成功后，并没有跳转到用户本来要访问的页面。

要实现这个功能的话，可以将用户要访问的页面作为参数传递到登录控制器，由登录控制器根据参数完成路径跳转

修改网关携带当前访问URI

修改changgou-gateway-web的com.changgou.filter.AuthorizeFilter，在之前的URL后面添加FROM参数以及FROM参数的值为request.getURI()

10. Day10 购物车渲染 - 图10

  1. package com.changgou.web.gateway.filter;
  3. import com.changgou.web.gateway.service.AuthService;
  4. import org.apache.commons.lang.StringUtils;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.cloud.gateway.filter.GatewayFilterChain;
  7. import org.springframework.cloud.gateway.filter.GlobalFilter;
  8. import org.springframework.core.Ordered;
  9. import org.springframework.http.HttpStatus;
  10. import org.springframework.http.server.reactive.ServerHttpRequest;
  11. import org.springframework.http.server.reactive.ServerHttpResponse;
  12. import org.springframework.stereotype.Component;
  13. import org.springframework.web.server.ServerWebExchange;
  14. import reactor.core.publisher.Mono;
  16. @Component
  17. public class AuthFilter implements GlobalFilter, Ordered {
  19.     private static final String LOGIN_URL = "http://localhost:8001/api/oauth/toLogin";
  21.     @Autowired
  22.     private AuthService authService;
  25.     @Override
  26.     public Mono<Void> filter(ServerWebExchange exchange, GatewayFilterChain chain) {
  27.         ServerHttpRequest request = exchange.getRequest();
  28.         ServerHttpResponse response = exchange.getResponse();
  29.         //1.判断请求路径是否为登陆请求 如果是 则直接放行
  30.         String path = request.getURI().getPath();
  31.         if ("/api/oauth/login".equals(path) || !URLFilter.hasAuthorize(path)) {
  32.             //直接放行
  33.             return chain.filter(exchange);
  34.         }
  35.         //2.不是登陆请求 从cookie中获取jti的值 如果值不存在 拒绝本次访问
  36.         String jti = authService.getJtiFromCookie(request);
  37.         if (StringUtils.isEmpty(jti)) {
  38.             //为空 拒绝访问
  39. //            response.setStatusCode(HttpStatus.UNAUTHORIZED);
  40. //            return response.setComplete();
  41.             //跳转到登陆页面
  42.             return this.toLoginPage(LOGIN_URL+"?FROM="+request.getURI().getPath(), exchange);
  43.         }
  46.         //3.如果cookie中有jti的值 从redis中获取jwt的值 如果值不存在 拒绝本次访问
  47.         String jwt = authService.getJwtFromRedis(jti);
  48.         if (StringUtils.isEmpty(jwt)) {
  49.             //过期或不存在 拒绝访问
  50. //            response.setStatusCode(HttpStatus.UNAUTHORIZED);
  51. //            return response.setComplete();
  52.             //跳转到登陆页面
  53.             return this.toLoginPage(LOGIN_URL, exchange);
  54.         }
  56.         //对当前的请求对象进行增强 让它携带令牌的信息
  57.         request.mutate().header("Authorization", "Bearer " + jwt);
  58.         return chain.filter(exchange);
  59.     }
  61.     //跳转登陆页面
  62.     private Mono<Void> toLoginPage(String loginUrl, ServerWebExchange exchange) {
  63.         ServerHttpResponse response = exchange.getResponse();
  64.         response.setStatusCode(HttpStatus.SEE_OTHER); //302
  65.         response.getHeaders().set("Location", loginUrl);
  66.         return response.setComplete();
  67.     }
  69.     @Override
  70.     public int getOrder() {
  71.         return 0;
  72.     }
  73. }

登录控制器获取参数

修改changgou-user-oauth的com.changgou.oauth.controller.LoginRedirect记录访问来源页

10. Day10 购物车渲染 - 图11

  1. @RequestMapping("/toLogin")
  2. public String toLogin(@RequestParam(value = "FROM",required = false,defaultValue = "") String from, Model model){
  3.     model.addAttribute("from",from);
  4.     return "login";
  5. }

修改页面，获取来源页信息，并存到from变量中，登录成功后跳转到该地址

10. Day10 购物车渲染 - 图12

  1. <script th:inline="javascript">
  2.     var app = new Vue({
  3.         el: "#app",
  4.         data: {
  5.             username: "",
  6.             password: "",
  7.             msg: "",
  8.             from: [[${from}]],
  9.         },
  10.         methods: {
  11.             login: function () {
  12.                 app.msg = "正在登录";
  13.                 axios.post("/api/oauth/login?username=" + app.username + "&password=" + app.password).then(function (response) {
  14.                     if (response.data.flag) {
  15.                         app.msg = "登录成功";
  16.                         //跳转原地址
  17.                         location.href = app.from
  18.                     } else {
  19.                         app.msg = "登录失败";
  20.                     }
  21.                 })
  22.             }
  23.         }
  24.     })
  25. </script>