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":"登录成功","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请求的权限管理以及数据返回