localStorage和window.localStorage

Question

如题，请问有大神解答下
localStorage 和 window.localStorage 有什么问题吗。
使用场景，vue 用户登录过 返回token，通过vuex 存到state下

vuex

const store = new Vuex.Store({
  state: {
    // 存储token
    //Authorization:
    //window.localStorage.getItem('Authorization') ? window.localStorage.getItem('Authorization') : '',
    Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : '',
    user: {}
  },
  mutations: {
    // 修改token，并将token存入localStorage
    changeLogin(state,token) {
      state.Authorization = token;
      // window.localStorage.setItem('Authorization', token);
      localStorage.setItem('Authorization', token);
    }
  },
  actions: {

  }
})

// 登录页 login.vue

apiLogin({
    phone: _this.formdata.phone,
    password: _this.formdata.password
})
.then(res => {
    if (res.code === 5) {
        Toast.fail(res.describe);
    } else if (res.code === 0) {
        Toast.success(res.describe);
        const token = "Bearer " + res.data.token;
        // 将用户token保存到vuex中
        _this.$store.commit("changeLogin", token);
        if (_this.$route.query.redirect) {
            _this.$router.push({
                path: decodeURIComponent(_this.$route.query.redirect) //跳转到原页面
            });
        } else {
            _this.$router.push("/home"); //正常登录流程进入的页面
        }
    }
})
.catch(err => {
    console.log(err)
    Toast.fail(err.message)
});

封装的axios

axios.defaults.baseURL = baseURL;
axios.defaults.timeout = 10 * 1000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

//请求拦截
axios.interceptors.request.use(
    config => {
        Toast.loading({
            duration: 0,
            forbidClick: true,
        });
        /*
         *每次发送请求之前判断vuex中是否存在token        
         * 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
         * 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
         */
         // if (window.localStorage.getItem('Authorization')) {
         //    config.headers.Authorization = window.localStorage.getItem('Authorization');
         // }
        if (localStorage.getItem('Authorization')) {
            config.headers.Authorization = localStorage.getItem('Authorization');
        }
        return config;
    },
    error => {
        Toast.clear();
        return Promise.error(error);
    }
)

看凡是需要用的localStorage的地方，加了window. 必然出错，或者登录不能。这是稀奇了。~ 也不知道为啥。。。

Answer 1

理论上应该没有区别，window 下的对象都会自动挂载到全局里。

你报的什么错？window is not defined 吗？

如果是这个错误的话，这是 Webpack 的 Bug，你需要在项目的 webpack.base.config.js 做改动：

module.exports = {
   ...
   output: {
      ...
      globalObject: 'this' // 加这个设置
   }
}

Answer 2

到底报的什么错，贴个错误原文看看