后台管理系统需要同时支持http和https的访问网址，而且只登录一次即可另一个网址自动登录——技能提升

场景

最近在做后台管理系统，由于本人对这个不是很熟悉，因此今天遇到一个需求：要求同时支持http和https的访问链接时，我的第一反应就是这得后端处理，处理成http和https的自动切换，这样就不用我这边处理了。

后来发现，后台管理系统配置好http和https之后，其实是支持同时登录的，但是遇到了一个报错，如下：

这个是由于：在http登录后，用https的网址再次登录时，会因为页面中含有token并且在有效时间内，所以页面直接跳过login登录直接跳转到首页，这个功能是在app.vue中完成的。但是此时需要通过接口拿到用户信息及权限才可以。我漏了这个获取用户信息和权限的部分，导致上面展示用户信息时的报错。

在app.vue中的mounted生命函数中，先判断是否有token且token是否有效，如果有效，则触发vuex中的refreshPermissions刷新权限的功能，否则的话，会跳转到login页面。

上图中的checkAuthorization()方法就是判断是否有token且token是否有效的。

1.判断是否有token且token是否有效

function checkAuthorization(authType = AUTH_TYPE.BEARER) {
    switch (authType) {
        case AUTH_TYPE.BEARER:
            if (Cookie.get(xsrfHeaderName)) {
                const token = Cookie.get(xsrfHeaderName);
                const expiresIn = Cookie.get("expiresIn");
                if (token && new Date().getTime() < expiresIn) {
                    return true
                }
            }
            break
        case AUTH_TYPE.BASIC:
        case AUTH_TYPE.AUTH1:
        case AUTH_TYPE.AUTH2:
        default:
            break
    }
    return false
}

2.vuex中的refreshPermissions刷新权限功能

actions: {
  refreshPermissions({ commit }, callback) {
      const accessToken = Cookie.get("Authorization");
      var token = accessToken.split(".")[1];
      // 网上的token解析(中间数据段)
      var userinfo = JSON.parse(
          decodeURIComponent(
              escape(window.atob(token.replace(/-/g, "+").replace(/_/g, "/")))
          )
      );
      const name = userinfo.display_name;
      const headurl = userinfo.head_picture;
      commit("setUser", {
          userName: name,
          headUrl: headurl
      });
      getPermissionCurrent()
          .then((res) => {
              var obj = {};
              var data = res.data;
              data &&
                  data.map((d) => {
                      if (d.indexOf(".") > -1) {
                          var str = d.substring(0, d.indexOf("."));
                          if (data.indexOf(str) == -1) {
                              obj[str] = true;
                          }
                      }
                      obj[d] = true;
                  });
              let permissions = handlePermissions(obj);
              console.log('更新权限', permissions);
              commit('setPermissions', permissions);
              setTimeout(() => {
                  loadRoutes();
              }, 500)
              callback && callback('success');
          })
          .catch(() => {
              callback && callback('error');
          })
  }
},

根据token获取用户信息：

const accessToken = Cookie.get("Authorization");
var token = accessToken.split(".")[1];
// 网上的token解析(中间数据段)
var userinfo = JSON.parse(
    decodeURIComponent(
        escape(window.atob(token.replace(/-/g, "+").replace(/_/g, "/")))
    )
);
const name = userinfo.display_name;
const headurl = userinfo.head_picture;
commit("setUser", {
    userName: name,
    headUrl: headurl
});

通过commit给mutations中的setUser方法设置用户信息。

loadRoutes就是加载路由的方法，由于权限部分有控制路由的展示与隐藏，因此在加载路由之前，要先获取权限，此处加个延时也是为了权限获取成功后再加载路由。

以上问题解决！！！

下面的内容与文章相关不大，只是为了凑字数而写，可忽略！！！

http与https

Http：HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写。HTTP 协议和 TCP/IP 协议族内的其他众多的协议相同， 用于客户端和服务器之间的通信。

Https：HTTPS是身披SSL外壳的HTTP。HTTPS是一种通过计算机网络进行安全通信的传输协议，经由HTTP进行通信，利用SSL/TLS建立全信道，加密数据包。HTTPS使用的主要目的是提供对网站服务器的身份认证，同时保护交换数据的隐私与完整性。

区别

1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

Http码分类

分类	分类描述
1**	信息，服务器收到请求，需要请求者继续执行操作
2**	成功，操作被成功接收并处理
3**	重定向，需要进一步的操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误

常用Http状态码

状态码	描述
200	请求成功
301	资源（网页等）被永久转移到其它URL
404	请求的资源（网页等）不存在
500	内部服务器错误

全面的Http状态码