전면에서 사용자 역할을 안전하게 저장할 위치

전면에서 사용자 역할을 안전하게 저장할 위치

Vuejs 앱에서 작업 중인데 사용자가 정상적으로 로그인하면 백엔드에서 토큰만 반환됩니다.

라우터의 Enter()에서 사용하기 전에 사용자의 역할을 어딘가에 저장해야 합니다.

사용자가 로그인하면 사용자 정보(역할 포함)를 가져오는 요청이 나타납니다.그러나 페이지를 갱신하거나 경로를 변경하면 상태가 손실됩니다.

Si Local Stage에 사용자 info를 넣으려고 했는데 애플리케이션(Chrome)에서 역할을 편집할 수 있기 때문에 전혀 안전하지 않다고 생각합니다.

라우터에서 항상 역할을 사용할 수 있어야 하는데 로컬 스토리지 이외에는 사용할 수 없습니다.

해결방법은?

EDIT: 백엔드에서 응답으로 토큰만 받았기 때문입니다.다른 요청을 직접 호출하여 사용자 데이터(역할 포함)를 가져오는 것이 좋은가?

다음과 같은 경우:

export function loginUser ({ commit }, payload) {
    return new Promise(resolve => {
    LoginService.login(payload)
      .then(data => {
          console.log('enter')
          console.log(data)
            let tkn = data.access_token
            Cookies.set('tkn', tkn.toString())
            Cookies.set('cntd', 'true')
     --->   UserService.getB2cUserProfile()
            .then(data => {
                commit('LOGIN_USER', data)
                // will commit the data here to change the userInfos state
                resolve(data)

            })
      })
      .catch(err => {
        console.log(err)
      })
    })
}

vue-persisted state를 사용하는 vuex를 사용해야 합니다.vue-persisted state는 자신의 상태와 동기화되어 있는 쿠키를 사용하여 페이지를 새로 고친 경우 페이지를 동일하게 유지하므로 상태가 변경될 때마다 쿠키에서 자동으로 변경되어 원하는 것(루팅 및 새로 고침 시)에 도움이 됩니다.로그인 후 토큰을 얻으면 상태를 설정할 수 있습니다.또한 지속성 상태를 사용하여 현재 로그인하고 있는 사용자에 대해 저장할 경로의 상태를 지정할 수 있습니다.사용자가 웹 사이트에서 로그아웃한 후 역할 및 기타 상태를 기본값으로 다시 설정할 수 있습니다.따라서 vuex의 In-store에서는 다음과 같은 작업을 수행할 수 있습니다.

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from "vuex-persistedstate";
import * as Cookies from "js-cookie";

Vue.use(Vuex);
export const store = new Vuex.Store({
    state: {
        auth: "false",
        role: "",
        anyotherproperty:""
    },
    getters: {
        getRole: state => {
            return state.role;
        },
        getAuth: state => {
            return state.auth;
        },
    },
    plugins: [
        createPersistedState({
            paths: ['auth', 'role'],
            storage: {
                getItem: (key) => Cookies.get(key),
                setItem: (key, value) =>
                    Cookies.set(key, value, { expires: 7}),
                removeItem: (key) => Cookies.remove(key),
            },
        }),
    ],
    mutations: {
        //mutation will change the states like auth and role
    },
    actions: { //your actions which commit a mutation
    }

});

그런 다음 vuex에서 정의된 글로벌 상태를 사용하여 사용자 역할이 A인지 B인지 기본값인지, 인증이 true인지 false인지를 확인할 수 있습니다.이렇게 하면 모든 것을 잘 관리할 수 있습니다.

언급URL : https://stackoverflow.com/questions/65163483/where-to-store-the-user-role-securely-in-front