Динамическое перенаправление пользователя на страницу входа

Question

У меня есть приложение Vue.js, в котором для некоторых маршрутов требуется, чтобы пользователь вошел в систему, тогда как другие (например, страница входа в систему) являются общедоступными.

created() {
    let context = this;
    context.axios.create({withCredentials: true}).get(`${context.$store.getters.getApiUrl}/session/`).then(response => {
      context.$store.commit('loginUser');
      context.$store.commit('setUser', response.data.data);
    }, error => { 
       /* 
          This indicates a 401 unathorized response that indicates 
          the session cookie has expired
       */
      context.$store.commit('logoutUser')
    });
},
computed: {
    authorized: {
        get: function() {
            let authenticated = this.$store.getters.getUserAuthStatus;
            let route = this.$route;
            if (authenticated !== true && route.meta.requiresLogin === true) {
              return false;
            }
            else {
                return true;
            }
        }
    }
},
watch: {
    authorized: function(val) {
        if (val === false) {
            this.$router.push('/signin');
            this.$store.commit('setGlobalInfo', 'Please sign in first.');
        }
    }
}

Обычно, когда пользователь открывает приложение, я отправляю запрос на защищенный маршрут на сервере. В зависимости от ответа я либо регистрирую пользователя (и устанавливаю статус Vuex authenticated на true), либо выхожу из него.

Я добавил наблюдателя, потому что хочу автоматически перенаправить пользователя на login, если изменяется вычисляемое свойство authorized. Однако я не получил его на работу. Свойство authorized вычисляется правильно, но функция наблюдателя никогда не срабатывает.

Насколько я понимаю, вы можете просматривать вычисленные свойства в Vue, если вы присваиваете им одно и то же имя (то есть "разрешено"). Я что-то делаю неправильно?

Answer 1

Похоже, мне нужно было установить deep: true на наблюдателя.

computed: {
    authorized: {
        let authenticated = this.$store.getters.getUserAuthStatus;
        let route = this.$route;
        if (authenticated !== true && route.meta.requiresLogin === true) {
            return false;
        }
        else {
            return true;
        }
    }
},
watch: {
    authorized: {
        handler: function(val) {
            if (val === false) {
                this.$router.push('/signin');
                this.$store.commit('setGlobalInfo', 'Please sign in first.');
            }
        },
        deep: true;
}