之前自用的项目中使用的是springsecurity权限管理框架，没有使用自定义token，因此是默认的cookie方式，突然有一天浏览器在跨域的情况下不支持cookie了，虽然可以更改浏览器的安全设置来解决，但这种方法治标不治本，治本还是要使用自定义token方式。

satoken权限控制框架在github上有2.7K的star，算是一个比较不错的框架了，其使用比springsecurity要简单。

一、maven依赖

<!-- Sa-Token 权限认证, 在线文档：http://sa-token.dev33.cn/ -->
<dependency>
    <groupId>cn.dev33</groupId>
    <artifactId>sa-token-spring-boot-starter</artifactId>
    <version>1.19.0</version>
</dependency>

二、配置文件

# token名称 (同时也是headers中的名称)
spring.sa-token.token-name: satoken
# token有效期，单位s 默认30天, -1代表永不过期，大概8个多小时必定过期
spring.sa-token.timeout: 30000
# token临时有效期 (指定时间内无操作就视为token过期) 单位: 秒
spring.sa-token.activity-timeout: -1
# 是否允许同一账号并发登录 (为true时允许一起登录, 为false时新登录挤掉旧登录)
spring.sa-token.allow-concurrent-login: true
# 在多人登录同一账号时，是否共用一个token (为true时所有登录共用一个token, 为false时每次登录新建一个token)
spring.sa-token.is-share: false
# token风格，默认为uuid
spring.sa-token.token-style: random-64
# 是否输出操作日志
spring.sa-token.is-log: false

三、自定义权限角色查询接口实现

@Component    // 保证此类被SpringBoot扫描，完成sa-token的自定义权限验证扩展
public class StpInterfaceImpl implements StpInterface {
    @Autowired
    private UserDao userDao;
    @Autowired
    private RoleMapper roleMapper;
    @Autowired
    private User_RoleMapper user_roleMapper;
    /**
     * 返回一个账号所拥有的权限码集合
     */
    @Override
    public List<String> getPermissionList(Object loginId, String loginKey) {
        // 查出当前用户的权限信息
        List<String> list = new ArrayList<String>();
        List<Permission> permissions = userDao.findPermissionByUserName(loginId.toString());
        permissions.forEach(l -> {
            list.add(l.getPermTag());
        });
        return list;
    }
    /**
     * 返回一个账号所拥有的角色标识集合 (权限与角色可分开校验)
     */
    @Override
    public List<String> getRoleList(Object loginId, String loginKey) {
        // 查出当前用户的角色信息
        List<String> list = new ArrayList<String>();
        int id = userDao.selectOne(Wrappers.<User>lambdaQuery().eq(User::getUsername, loginId.toString())).getId();
        List<User_Role> user_roles = user_roleMapper.selectList(Wrappers.<User_Role>lambdaQuery().eq(User_Role::getUid, id));
        user_roles.forEach( l -> {
            int rid = l.getRid();
            Role role = roleMapper.selectOne(Wrappers.<Role>lambdaQuery().eq(Role::getId, rid));
            list.add(role.getRoleName());
        });
        return list;
    }
}

四、java配置文件

关键之处在于排除路径的认证。

由于我这个项目大部分是前后分离的，有一小部分是后端的模板html文件请求，因此主要在模板文件请求中如何去传递token。

@Configuration
public class MyConfig implements WebMvcConfigurer {
  @Override
   public void addInterceptors(InterceptorRegistry registry) {
       // 注册路由拦截器，自定义验证规则
       registry.addInterceptor(new SaRouteInterceptor((request, response, handler)->{
           if (!request.getMethod().equals(HttpMethod.OPTIONS.toString())) {
               SaRouterUtil.match("/**", () -> StpUtil.checkLogin());
               SaRouterUtil.match(Arrays.asList("/user/**","/role/**"),
                       Arrays.asList("/user/selectList", "/user/selectByUserNameAndPassword", "/user/updataPassword"),
                       () -> StpUtil.checkPermission("USERMANAGER"));
               SaRouterUtil.match("/tax/**",() -> StpUtil.checkPermission("TAXFILES"));
               SaRouterUtil.match("/customer/**",() -> StpUtil.checkPermission("COMPANYFILES"));
               SaRouterUtil.match("/product/**",() -> StpUtil.checkPermission("PRODUCTFILES"));
               SaRouterUtil.match("/designNotice/**",() -> StpUtil.checkPermission("NOTICEDESIGN"));
               SaRouterUtil.match("/price/**",() -> StpUtil.checkPermission("PRICEDESIGN"));
               SaRouterUtil.match(Arrays.asList("/contract/**","/picture/**"),() -> StpUtil.checkPermission("CONTRACTMANAGER"));
           }
       })).addPathPatterns("/**").excludePathPatterns("/login","/static/**","/showNotice",
               "/noticepicture/show","/noticepicture/down",
               "/images/**",
               "/price/download","/user/backup",
               "/picture/show","/picture/downjpg");
     //此上为排除的路径，需要自定义其验证，包括login请求
   }
}

五、后端模板文件的自定义token请求

模板文件的请求是通过url路径来请求的，且前后端分离情况下的token不能传递到模板文件的请求体headers中，因此我想了个办法，使用url传递token，然后在后端进行验证token的合法性。

• 前端代码中js逻辑，添加一个satoken参数

showNotice (index, id) {
      window.open(global.BASE_URL + 'showNotice?id=' + id + '&satoken=' + this.$store.state.satoken)
    },

• 后端代码

@ApiOperation(value="跳转设计制作通知单——return:showNotice.html")
 @RequestMapping("/showNotice")
    public String toshowNotice(int id,String satoken){
        Object loginId = StpUtil.getLoginIdByToken(satoken);
        if (loginId != null){
          //getLoginIdByToken方法，获取指定token对应的登录id，如果未登录，则返回 null 
            return "showNotice";
        } else {
          // token验证不通过跳转到403.html显示无权限页面
            return "403";
        }
    }

六、登录、登出请求

@PostMapping("/login")
@ResponseBody
public Result<User> doLogin(User user) {
        // 从数据库中查询数据进行比对
        String username = user.getUsername();
        String password = user.getPassword();
        Result<Boolean> result = userService.selectByUserNameAndPassword(username, password);
        if (result.getData()) {
            //当前用户登录
            StpUtil.setLoginId(username);
            Result<User> result1 = userService.selectByUserName(username);
            List<Permission> permission = userDao.findPermissionByUserName(username);
            User user1 = result1.getData();
            //设置权限
            user1.setAuthorities(permission);
            //设置token值
            user1.setSatoken(StpUtil.getTokenValue());
            result1.setData(user1);
            return result1;
        }else {
            return Result.failure(101,"登录失败");
        }
    }

@PostMapping("/logout")
@ResponseBody
public Result<String> logout() {
    StpUtil.logout();
   eturn Result.defaultSuccess("登出成功");
}

七、密码的加密处理

之前在sprintsecurity中使用的是BCrypt加密，去除依赖后需要修改，引入hutool依赖包。

//将明文密码进行加密
String  BCrypt.hashpw(password)
//将明文密码与加密后的密码进行比较
Boolean BCrypt.checkpw(password,hashpw)

八、前端中对于satoken的处理

在前端中使用的是vue+element+axios+vuex。

在登录的时候将satoken的值存储到vuex中，在登出或者响应token错误代码的时候清除vuex中的satoken值。

然后在axios请求的配置中加上headers。

axios.interceptors.response.use((response) => {
  if (response.data === null) {
    window.location = '/login'
  } else {
    return response
  }
}, function (error) {
  if (error.response.status === 302) {
    window.location = '/login'
  } else if (error.response.status === 500) {
    // 服务器返回500代码时未登录清除缓存并跳转至登录页面
    store.commit('del_token')
    window.location = '/login'
  } else {
    return Promise.reject(error)
  }
})

// 在每次请求中携带satoken的headers
axios.interceptors.request.use((config) => {
  let satoken = store.state.satoken
  if (satoken) {
    config.headers['satoken'] = satoken
  }
  return config
}, err => {
  return Promise.reject(err)
})

九、关于element的upload组件中如何携带token

需要一个computed属性

computed: {
    headers () {
      return {
        'satoken': this.$store.state.satoken // 直接从本地获取token就行
      }
    }
  },

在组件属性中增加一个 :headers="headers"

<el-upload
            class="upload-demo"
            ref="upload"
            :action="action()"
            accept=".jpg,.png"
            :before-upload="beforeAvatarUpload"
            :on-success="onSuccess"
            :on-preview="handlePreview"
            :before-remove="beforeRemove"
            :on-remove="handleRemove"
            :file-list="orderfileList"
            :multiple="false"
            :headers="headers"
            :auto-upload="true">
            <el-button slot="trigger" size="small" type="primary">选择</el-button>
            <span slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</span>
</el-upload>

此处有一个重要问题，这个问题坑了我半天时间，使用token时不需要使用cookie了，因此之前使用springsecurity的时候使用的一个属性 :with-credentials = "true" 需要去掉，因为它还会检测cookie，导致上传验证不通过，此值默认为false，因此去掉即可。