项目安全问题一直被人们研究，当前端路径上通过?status这种拼接参数时，参数的值在浏览器路径栏上非常醒目，是很容易被人恶意修改的，比如该用户并没有编辑权限，但有心之人却可以通过修改参数status的值把see改成edit，然后还可以改query路径参数的id，前端通常会通过上述参数开启页面按钮权限，也会根据id去调用接口实现功能。

事实上如果是移动端，也会出现上述情况，我之前在做公众号开发时，就经常在右上角复制页面路径然后改参数值去测试功能，后来是通过一些判断，右上角三个点是否出现，把相关功能给隐藏了才得以解决，关于隐藏右上角的功能按键，微信开发者官方文档应该是写的很清楚，我们可以在指定页面再开启该功能。

项目中我们会把后端返回的一些信息放在会话存储或本地存储中，这也会带来安全问题

 

web端开发项目时怎么解决安全问题，下文便是我当前项目在用的方法。

1.使用SM4加密——请求头加两个参数，一个是token加用户ID加时间戳加当前请求的路径,一个是请求时时间戳，默认query上拼两个参数这种，md5加解密用户信息。

  // 获取当前时间-时间戳-ISO 8601扩展格式的日期 new Date(Date.now()).toISOString() 

2.把参数传给后端后，后端解密然后判断该用户是否有修改、查询当前页面内容的权限，进而阻止有心之人的恶意操作。

3.后端传给前端的所有响应数据都加密，前端SM4解密后使用。

4.前后端怎么加解密：

参考该gitee 项目

 

其中的base64js.js文件可能有问题，我自己npm install base64-js了一下，然后在SM4Util.js里引入使用

var base64js = require('base64-js');

一、在前端axios请求拦截器可以获取到我们想要的，像接口路径和参数，我们可以在这里进行加密处理。

Vue.prototype.$http.interceptors.request.use(config => {

  // console.log('config的路径，参数 :>> ', config.url,config.data);
// 加密 SM4Util.sm4ECBEncrypt(需要加密的字符串, 密钥)
config.headers.随便起的名称={加密后的参数};
  return config;
});

二、在响应拦截器Vue.prototype.$http.interceptors.response.use里做对响应的统一解密处理，然后return出去；