vue+webpack+vue-router+vuex+axios调需要登录的接口怎么办?

Question

vue+webpack+vue-router+vuex+axios调需要登录的接口怎么办?

在A页面(localhost:8080#/XXX/XXX)调B接口,B接口需要先判断用户是否登录,登录返{login:1,data:...},没有登录返回{login:-1}

axios拦截

axios.interceptors.response.use(function(response) { //配置请求回来的信息
    if (response.data.login == -1) { //未登录       
        window.location.href="http://xxx.xxx.xxx/user/login.html?redirect_url="+encodeURIComponent(location.href);//跳转到登录页
    }
    return response;
}, function(error) {
    return Promise.reject(error);
});

登录承成功之后,跳回A页面(localhost:8080#/XXX/XXX),再调取接口仍然返回{login:-1},localhost域名跟真实的域名不能共享登录状态!
现在的做法就是,
方法一:代码写好之后,npm run build打包,然后以真实的域名访问A页面->跳到登录页->跳回A页面,在调接口->发现bug->再修改代码->再打包...
方法二:开发环境,后台接口取消先验证登录的逻辑,需要用户信息的地方填写默认的信息!
请问,有没有好的办法解决需要登录才能访问的接口?

Answer 1

因该在请求的时候带上A页面登录成功后，返回的token
由于不知道你的验证规则是什么，只能用我下面的代码来说明一下，
我的代码但登录成功以后，后返回一个token用于验证是否成功登录并有访问权限，并在本地保存
我的验证方式是在每次 request 的header中 带上 authorization: Bearer xxxxxxxxxxxxxxxx

service.interceptors.request.use(config => {
  if (store.getters.userInfo.token) {
    config.headers['Authorization'] = 'Bearer ' + store.getters.userInfo.token
  }
  return config
}, error => {
  console.log(error)
  Promise.reject(error)
})