vue页面菜单权限问题解决

带锚点的url,#后面部分后端获取不到.

vue的页面是带有#的路由,#后端服务获取不到,只在浏览器端有用.

URL 中的哈希符号 (#) 被用来作为网页中的 锚点 使用，锚点的含义就是页面中的某个特定的位置，这个位置可以被快速找到，很类似于在该位置抛了一个锚。

哈希符号 # 右侧的部分，是这个锚点的唯一标志，例如

http://www.example.com/index.html#section

代表了页面 index.html 中存在一个锚点 section，浏览器会自动滚动页面到 section 所指定的位置

下面的例子是如何在 html 中创建一个锚点，首先创建一个超链接，指向该锚点

<a href="#section">锚点跳转</a>

在创建锚点所在的位置，只需要创建一个 div 块，使其 id 为 section

<div id="section"></div>

这样一来，在页面上点击 “锚点跳转” 时，页面将自动滚动到 id=”section” 的位置。同时，在 URL 后面会补充上 #section。

URL 中的哈希符号 (#) 用来指示浏览器的操作，对于服务端来说一点用处都没有。所以浏览器（以及我验证过的 http 客户端）发出的 http 请求中是不会携带任何 # 及其右侧数据的。

比如:

http://127.0.0.1:8001/index.html#/home

 

现在要在过滤器中作请求页面的鉴权,就犯难了.后端只能拿到index.html.

那怎么办?

解决方案:

数据库中的菜单配置成index.html/home  然后过滤器中根据index.html/home来鉴权

鉴权通过后,然后重定向到index.html#/home 就可以了

else if (checkSessionIsOk(httpRequest)) {
    //判断当前页面是否能访问 (如果页面出现在菜单中,那么需要分配权限,如果无权限则不能访问)

    //这里的请求url=index.html/home
    boolean canVisit = checkUrlCanVisit((HttpServletRequest) request, url);
    if (!canVisit) {
        httpResponse.sendRedirect("/static/views/error/authFail.html");
        return;
    }
    //请求url
    String staticView = "/index.html";
    if (!url.endsWith(staticView) && url.contains(staticView)) {
        int index = url.indexOf(staticView);
        String routerUrl = url.substring(index, index + staticView.length()) + "?" + httpRequest.getQueryString() + "#" + url.substring(index + staticView.length());
        logger.info("routerUrl:" + routerUrl);

        //这里跳转的页面为routerUrl =  index.html#/home
        ((HttpServletResponse) response).sendRedirect(routerUrl);
    } else {
        chain.doFilter(request, response);
    }
}