পৃষ্ঠায় রিফ্রেশে ভয়েস অবস্থা state

Question 1

আমার অ্যাপ্লিকেশন ব্যবহারকারীর প্রমাণীকরণের জন্য ফায়ারবেস এপিআই ব্যবহার করে, একটি ভুয়েস রাজ্যে বুলিয়ান মান হিসাবে লগইন স্থিতি সংরক্ষণ করে।

যখন আমি লগ ইন করি যখন আমি লগইন স্থিতি সেট করি এবং শর্ত অনুসারে লগইন / লগআউট বোতামটি প্রদর্শন করি।

পৃষ্ঠাটি রিফ্রেশ হয়ে গেলে, ভ্যু অ্যাপ্লিকেশনটির অবস্থা হারিয়ে যায় এবং ডিফল্টে পুনরায় সেট হয়

এমনকি কোনো ব্যবহারকারী লগ ইন থাকলেও যেমন একটি সমস্যা ঘটায় এবং পৃষ্ঠার রিফ্রেশ হয় লগইন অবস্থা ফিরে সেট করা হয় মিথ্যা এবং লগইন বাটন যদিও ব্যবহারকারী থাকার বিষয়টি মতেই লগ ইন লগ আউট বোতাম পরিবর্তে প্রদর্শিত হয় ....

এই আচরণটি রোধ করতে আমি কী করব

আমি কি কুকি ব্যবহার করব বা অন্য কোনও ভাল সমাধান পাওয়া যাবে ...

-

Question 2

এটি একটি পরিচিত ব্যবহারের কেস। বিভিন্ন সমাধান আছে।

উদাহরণস্বরূপ, এক ব্যবহার করতে পারেন vuex-persistedstate। vuexপৃষ্ঠার রিফ্রেশের মধ্যে স্থিতি পরিচালনা করতে ও সংরক্ষণ করার জন্য এটি একটি প্লাগইন ।

কোডের উদাহরণ:

import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      getState: (key) => Cookies.getJSON(key),
      setState: (key, state) => Cookies.set(key, state, { expires: 3, secure: true })
    })
  ]
})

আমরা এখানে যা করি তা সহজ:

আপনি ইনস্টল করা প্রয়োজন js-cookie
চালু থেকে getStateআমরা সংরক্ষণ করা অবস্থা লোড করার চেষ্টা করিCookies
উপর setStateআমরা আমাদের রাষ্ট্র সংরক্ষণCookies

দস্তাবেজ এবং ইনস্টলেশন নির্দেশাবলী: https://www.npmjs.com/package/vuex-persistsstate

Question 3

আপনার ভিউএক্স স্থিতি তৈরি করার সময়, এটি ভিয়েক্স-স্টেস্টেস্টেট প্লাগইন ব্যবহার করে সেশন স্টোরেজে সংরক্ষণ করুন এইভাবে, ব্রাউজারটি বন্ধ হয়ে গেলে তথ্য হারিয়ে যাবে। কুকিগুলির ব্যবহার এড়িয়ে চলুন কারণ এই মানগুলি ক্লায়েন্ট এবং সার্ভারের মধ্যে ভ্রমণ করবে।

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex);

export default new Vuex.Store({
    plugins: [createPersistedState({
        storage: window.sessionStorage,
    })],
    state: {
        //....
    }
});

sessionStorage.clear();ব্যবহারকারী ম্যানুয়ালি লগ আউট করার সময় ব্যবহার করুন ।

Question 4

ভিউেক্স রাজ্য স্মৃতিতে রাখা হয়। পৃষ্ঠার বোঝা এই বর্তমান অবস্থাকে মুছে ফেলবে। এই কারণেই রাজ্য পুনরায় লোড করতে জোর করে না।

তবে vuex-persistedstateপ্লাগইন এই সমস্যাটি সমাধান করে

npm install --save vuex-persistedstate

এখন এটি স্টোরে আমদানি করুন।

import Vue from 'vue'
import Vuex from 'vuex'
import account from './modules/account'
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    account,
  },
  plugins: [createPersistedState()]
});

এটি কোডের একক লাইনের সাথে নিখুঁতভাবে কাজ করেছে: plugins: [createPersistedState()]

Question 5

আমি মনে করি লগইন স্থিতি সংরক্ষণ করতে কুকিজ / স্থানীয় স্টোরেজ ব্যবহার করা কিছু পরিস্থিতিতে কিছু ত্রুটির কারণ হতে পারে।
ফায়ারবেস ইতিমধ্যে আমাদের জন্য স্থানীয় স্টোরেজে লগইন তথ্য রেকর্ড করে এক্সপায়ারটাইম এবং রিফ্রেশ টোকেন।
অতএব আমি লগইন স্থিতি পরীক্ষা করতে ভিউ তৈরি হুক এবং ফায়ারবেস এপিআই ব্যবহার করব।
যদি টোকেনের মেয়াদ শেষ হয়ে যায়, এপিআই আমাদের জন্য টোকেন রিফ্রেশ করবে।
সুতরাং আমরা নিশ্চিত করতে পারি যে আমাদের অ্যাপটিতে লগইন স্থিতির প্রদর্শন ফায়ারবেসের সমান।

new Vue({
    el: '#app',
    created() {
        firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                log('User is logined');
                // update data or vuex state
            } else {
                log('User is not logged in.');
            }
        });
    },
});

Question 6

রাষ্ট্রের উপর রাখুন:

producer: JSON.parse(localStorage.getItem('producer') || "{}")

রূপান্তর করা:

localStorage.setItem("producer",JSON.stringify(state.producer)) // OR
localStorage.removeItem("producers");

আমার জন্য ভাল কাজ করে!

Question 7

আমি যখনই ব্যবহারকারীর ডেটা পুনরায় লোড করি তখনও আমার শিরোনামগুলি পুনরায় সেট করে আমি এটিকে সমাধান করেছি, আমি কী জানি এর চেয়ে ভাল ...

new Vue({
    el: 'vue',
    render: h => h(VueBox),
    router,
    store,

    computed: {
        tokenJWT () {
            return this.$store.getters.tokenCheck
        },
    },


    created() {
        this.setAuth()

    },

    methods:
        Object.assign({}, mapActions(['setUser']), {

            setAuth(){
                if (this.tokenJWT) {
                    if (this.tokenJWT === 'expired') {
                        this.$store.dispatch('destroyAuth')
                        this.$store.dispatch('openModal')
                        this.$store.dispatch('setElModal', 'form-login')

                    } else {
                        window.axios.defaults.headers.common = {
                            'Accept': 'application/json',
                            'Authorization': 'Bearer ' + this.tokenJWT
                        }
                        axios.get( api.domain + api.authApi )
                            .then(res => {
                                if (res.status == 200) {
                                    this.setUser( res.data.user )
                                }
                            })
                            .catch( errors => {
                                console.log(errors)
                                this.destroyAuth()
                            })
                    }
                }
            }
        })

})