SSM环境shiro跨域AJAX权限管理，数据请求

首先，项目环境是用：

Java后端：Myeclipse10

后端采用框架：ssm，没有用到mevan管理jar包

实行前后分离开发模式，通过api接口向前端传递数据

web前端：HTML5

首先跨域问题，重写过滤器Filter的doFilter()方法

   @Override
   public
void doFilter(ServletRequest request,ServletResponse response,
          FilterChain chain) throws IOException, ServletException {
//    HttpServletResponseres=(HttpServletResponse)response;
//    res.setContentType("text/html;charset=UTF-8");
//    res.setHeader("Access-Control-Allow-Origin","*");
//    res.setHeader("Access-Control-Allow-Methods","POST,GET,OPTIONS,DELETE");
//    res.setHeader("Access-Control-Max-Age","86400");
//    res.setHeader("Access-Control-Allow-Headers","Origin,No-Cache,X-Requested-With,If-Modified-Since,Pragma,Last-Modified,Cache-Control,Expires,Content-Type,X-E4M-With,userId,token");
//    res.setHeader("Access-Control-Allow-Credentials","true");
//    res.setHeader("XDomainRequestAllowed","1");
//    chain.doFilter(request, response);
       HttpServletResponse httpServletResponse = (HttpServletResponse) response;
          httpServletResponse.setHeader("Access-Control-Allow-Origin",
"*");
          httpServletResponse.setHeader("Access-Control-Allow-Headers",
"accept,content-type");
          httpServletResponse.setHeader("Access-Control-Allow-Methods",
"OPTIONS,GET,POST,DELETE,PUT");
          chain.doFilter(request, httpServletResponse);
           
   }

 

Web.xml配置中加上

 

    <filter>
    <filter-name>cors</filter-name>
    <filter-class>main.java.com.skyi.ietm.common.base.CorsFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>cors</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

 

配置完成之后ajax就可以跨域请求数据了

 

然后是shiro权限管理框架的搭建

导入相关的shiro  jar包

加入shiro.xml配置文件

加入shiro的基础bean

 

然后是ajax请求的权限管理问题

$.ajax({
    type: "GET",
    url: "http://localhost:8080/IETMSL/user/login",
    data: "userName=admin&pwd=123",
    //dataType: 'json',
    dataType: 'JSONP',
    jsonp:"jsonpCallback",
    jsonpCallback:" callback",
    success: function(msg){
         alert(6666);
    }
});

 

Ajax请求中的dataType参数使用JSONP

dataType:
'JSONP',

 

解决了跨域ajax请求的权限管理问题

 

现在还有一个问题，jsonp跟json其实是个东西来的，后台直接返回json数据的话，jsonp

是无法正确获取的，需要把返回的json数据进行包装

如：

callback({"data":{"stuNumber":"109074350","Username":"zhuxian","password":"123456"},"message
4000
":"登录成功","status":"OK"}) 

 

这里参考文章如下：

java代码：
try{
res.setContentType("text/plain");
res.setCharacterEncoding("utf-8");
res.setHeader("Pragma", "No-cache");  
       res.setHeader("Cache-Control","no-cache");  
       res.setDateHeader("Expires",0);  
String jsonpCallBack = req.getParameter("callback");
HashMap map = new HashMap();
map.put("Username", "zhuxian");
map.put("password", "123456");
map.put("stuNumber", "109074350");
ResultInfo result = new ResultInfo();
PrintWriter out = res.getWriter();
result.setStatus("OK");
result.setData(map);
result.setMessage("登录成功");
toResultPrint(jsonpCallBack, result, out);
}catch(Exception e){
e.printStackTrace();
}
 
 
js代码：
先写一个common.js用来存放一些通用的方法和一些常量
var classPath='http://121.42.45.17:8080/messageBox/';
 //将form表单转化为json
    function serializeJson(frmId) {
      var jsonStr = '{';
      $($('#' +frmId).serializeArray()).each(function() {
      jsonStr += '\''+this.name + '\':\'' +this.value + '\',';
      });
      jsonStr = jsonStr.substring(0,jsonStr.length - 1);
      jsonStr += '}';
      return jsonStr;
      }
当然不用这个方法也可以，可以自己手动转，表单内容不多也无所谓，如果一个表单几十个数据要提交，
手动转前台会哭的。
 
function login(){
var datas = serializeJson('loginForm');//这一行是将登录界面的名叫loginForm的表单所有数据转化为json字符串，刚刚上面定义过了。如果不用这个也可以手动定义：vardatas={"name":"123","password":"123"}
 
var url=classPath+"test";//调用后台服务的链接地址,classPath是前面说的common.js里面定义的统一路径,后面加上具体方法的路径和一些参数就行,如果有参数则路径为classPath+"test?参数名1=参数值1&参数名2=参数值2";
$.ajax({
type:"get",
async:false,
url:url,
dataType:'jsonp',//数据类型为jsonp 
jsonp:'callback',
//上面5行不用管也不用变
data:{'param':datas},//这一行是传递给后台的数据，必须是json格式，如果没有数据，就不需要这一行
jsonpCallback:'callback',//callback是一个名字 ，传给后台注册下就行，最好就用"callback"，方便管理维护
 
//下面一行定义了如果调用后台方法成功了就执行什么操作,后台会传递过来一个json格式的数据如：
//callback({"data":{"stuNumber":"109074350","Username":"zhuxian","password":"123456"},"message":"登录成功","status":"OK"}) 
//callback是传递给后台的名字,里面是内容；一般格式都是status状态+data数据+message消息，这个看个人喜好。
success:function(json){
//参数json就是上面例子的数据
if(json.status=='OK'){
alert(json.data.stuNumber);//输出109074350
}
}
});
}
其他功能和这个都差不多了，方法名字改一下，调用的url改一下，传递的datas改一下就行，然后success之后，先判断下json的status值是什么，status的值是什么代表什么意思和后台人员商量好就行、然后就可以处理json的data数据了，可以输出，可以显示到页面的任何位置了。
 

 

看完这里之后就有点头绪了，使用谷歌提供的开源项目Gson  对任何数据转化json数据

然后再对这个json数据进行修改，最后返回到前端！

 

这就完成了shiro对跨域ajax请求的权限管理以及数据返回