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

网络投稿 02-07 749

最近在做后台管理系统，由于本人对这个不是很熟悉，因此今天遇到一个需求：要求同时支持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就是加载路由的方法，由于权限部分有控制路由的展示与隐藏，因此在加载路由之前，要先获取权限，此处加个延时也是为了权限获取成功后再加载路由。

以上问题解决！！！