Kompatibilität mit backend (addfb7c7c463de5f44733896b06cb5fb480bedf8)
This commit is contained in:
		
							parent
							
								
									cb9ede5b27
								
							
						
					
					
						commit
						2383e28cd8
					
				| 
						 | 
				
			
			@ -6,19 +6,21 @@ import { StateInterface } from 'src/store';
 | 
			
		|||
export default boot<Store<StateInterface>>(({ router, store }) => {
 | 
			
		||||
  router.beforeEach((to, from, next) => {
 | 
			
		||||
    store.dispatch('user/loadFromLocalStorage').then(() => {
 | 
			
		||||
      const permissions = store.getters['user/permissions'];
 | 
			
		||||
      console.log('login_boot', permissions);
 | 
			
		||||
      const user: User = store.getters['user/user'];
 | 
			
		||||
      let permissions: string[] = [];
 | 
			
		||||
      user.roles.forEach(role => {
 | 
			
		||||
        permissions = permissions.concat(role.permissions)
 | 
			
		||||
      });
 | 
			
		||||
 | 
			
		||||
      if (
 | 
			
		||||
        to.matched.some((record: RouteRecord) => {
 | 
			
		||||
          // permissions is set AND has NO matching permission
 | 
			
		||||
          return (
 | 
			
		||||
            permissions in record.meta &&
 | 
			
		||||
            !(
 | 
			
		||||
              (
 | 
			
		||||
                record.meta.permissions.filter((value: string) =>
 | 
			
		||||
                  permissions.includes(value)
 | 
			
		||||
                ).length > 0
 | 
			
		||||
              )
 | 
			
		||||
            "permissions" in record.meta &&
 | 
			
		||||
            (
 | 
			
		||||
              record.meta.permissions.filter((value: string) =>
 | 
			
		||||
                permissions.includes(value)
 | 
			
		||||
              ).length == 0
 | 
			
		||||
            )
 | 
			
		||||
          );
 | 
			
		||||
        })
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,5 +1,4 @@
 | 
			
		|||
interface Session {
 | 
			
		||||
  user: User;
 | 
			
		||||
  expires: Date;
 | 
			
		||||
  token: string;
 | 
			
		||||
  lifetime: number;
 | 
			
		||||
| 
						 | 
				
			
			@ -7,25 +6,15 @@ interface Session {
 | 
			
		|||
  platform: string;
 | 
			
		||||
}
 | 
			
		||||
interface User {
 | 
			
		||||
  roles: Array<Role>;
 | 
			
		||||
  userid: string;
 | 
			
		||||
  display_name: string;
 | 
			
		||||
  firstname: string;
 | 
			
		||||
  lastname: string;
 | 
			
		||||
  mail: string;
 | 
			
		||||
  roles: Array<Role>;
 | 
			
		||||
}
 | 
			
		||||
interface Permission {
 | 
			
		||||
  id: number;
 | 
			
		||||
  name: string;
 | 
			
		||||
}
 | 
			
		||||
type Permission = string;
 | 
			
		||||
interface Role {
 | 
			
		||||
  name: string;
 | 
			
		||||
  permissions: Array<Permission>;
 | 
			
		||||
  id: number;
 | 
			
		||||
  name: string;
 | 
			
		||||
}
 | 
			
		||||
interface UserAttribute {
 | 
			
		||||
  id: number;
 | 
			
		||||
  user: number;
 | 
			
		||||
  name: string;
 | 
			
		||||
  value: string;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -10,17 +10,17 @@
 | 
			
		|||
        height=""
 | 
			
		||||
      >
 | 
			
		||||
        <q-card-section>
 | 
			
		||||
          Name: {{ userSession.user.firstname }} {{ userSession.user.lastname }}<br />
 | 
			
		||||
          E-Mail: {{ userSession.user.mail }}<br />
 | 
			
		||||
          Name: {{ userObj.firstname }} {{ userObj.lastname }}<br />
 | 
			
		||||
          E-Mail: {{ userObj.mail }}<br />
 | 
			
		||||
          Roles:
 | 
			
		||||
          <ul
 | 
			
		||||
            v-for="role in userSession.user.roles"
 | 
			
		||||
            v-for="role in userObj.roles"
 | 
			
		||||
            v-bind:key="role"
 | 
			
		||||
          >
 | 
			
		||||
            <li>{{ role }}</li>
 | 
			
		||||
          </ul>
 | 
			
		||||
          <br />
 | 
			
		||||
          Token expires: {{ userSession.expires }}
 | 
			
		||||
          Token expires: {{ sessionObj.expires }}
 | 
			
		||||
        </q-card-section>
 | 
			
		||||
      </q-card>
 | 
			
		||||
    </q-page>
 | 
			
		||||
| 
						 | 
				
			
			@ -36,16 +36,16 @@ import { mainLink } from '../plugin';
 | 
			
		|||
export default defineComponent({
 | 
			
		||||
  // name: 'PageName'
 | 
			
		||||
  setup(_, { root }) {
 | 
			
		||||
    const userPermissions = computed(
 | 
			
		||||
      () => <UserStateInterface>root.$store.getters['user/permissions']
 | 
			
		||||
    const userObj = computed(
 | 
			
		||||
      () => <UserStateInterface>root.$store.getters['user/user']
 | 
			
		||||
    );
 | 
			
		||||
    const userSession = computed(
 | 
			
		||||
    const sessionObj = computed(
 | 
			
		||||
      () => <UserStateInterface>root.$store.getters['user/session']
 | 
			
		||||
    );
 | 
			
		||||
    const checkMain = computed(() => {
 | 
			
		||||
      return mainLink.name == root.$route.name;
 | 
			
		||||
    });
 | 
			
		||||
    return { userPermissions, userSession, checkMain };
 | 
			
		||||
    return { userObj, sessionObj, checkMain };
 | 
			
		||||
  }
 | 
			
		||||
});
 | 
			
		||||
</script>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -11,57 +11,56 @@ export interface UserStateInterface extends LoginResponse {
 | 
			
		|||
}
 | 
			
		||||
 | 
			
		||||
export interface LoginResponse {
 | 
			
		||||
  permissions: string[];
 | 
			
		||||
  user: User;
 | 
			
		||||
  session: Session;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const state: UserStateInterface = {
 | 
			
		||||
  permissions: [],
 | 
			
		||||
  user: {
 | 
			
		||||
    display_name: '',
 | 
			
		||||
    firstname: '',
 | 
			
		||||
    lastname: '',
 | 
			
		||||
    mail: '',
 | 
			
		||||
    roles: [],
 | 
			
		||||
    userid: ''
 | 
			
		||||
  },
 | 
			
		||||
  session: {
 | 
			
		||||
    browser: '',
 | 
			
		||||
    expires: new Date(),
 | 
			
		||||
    lifetime: -1,
 | 
			
		||||
    platform: '',
 | 
			
		||||
    token: '',
 | 
			
		||||
    user: {
 | 
			
		||||
      display_name: '',
 | 
			
		||||
      firstname: '',
 | 
			
		||||
      lastname: '',
 | 
			
		||||
      mail: '',
 | 
			
		||||
      roles: [],
 | 
			
		||||
      userid: ''
 | 
			
		||||
    }
 | 
			
		||||
    token: ''
 | 
			
		||||
  },
 | 
			
		||||
  loginLoading: false
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const mutations: MutationTree<UserStateInterface> = {
 | 
			
		||||
  setPermissions(state, data: []) {
 | 
			
		||||
    state.permissions = data;
 | 
			
		||||
  setUser (state, data: User) {
 | 
			
		||||
    state.user = data;
 | 
			
		||||
  },
 | 
			
		||||
  setSession(state, data: Session) {
 | 
			
		||||
  setSession (state, data: Session) {
 | 
			
		||||
    state.session = data;
 | 
			
		||||
  },
 | 
			
		||||
  setLoginLoading(state, data: boolean) {
 | 
			
		||||
  setLoginLoading (state, data: boolean) {
 | 
			
		||||
    state.loginLoading = data;
 | 
			
		||||
  },
 | 
			
		||||
  showState(state) {
 | 
			
		||||
  showState (state) {
 | 
			
		||||
    console.log(state);
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const actions: ActionTree<UserStateInterface, StateInterface> = {
 | 
			
		||||
  login({ commit }, data: LoginData) {
 | 
			
		||||
  login ({ commit }, data: LoginData) {
 | 
			
		||||
    commit('setLoginLoading', true);
 | 
			
		||||
    Loading.show({ message: 'Du wirst eingeloggt' });
 | 
			
		||||
    void axios
 | 
			
		||||
      .post('/auth', data)
 | 
			
		||||
      .then((response: AxiosResponse<LoginResponse>) => {
 | 
			
		||||
        commit('setPermissions', response.data.permissions);
 | 
			
		||||
        commit('setUser', response.data.user);
 | 
			
		||||
        console.log('saved permisisons');
 | 
			
		||||
        commit('setSession', response.data.session);
 | 
			
		||||
        commit('showState');
 | 
			
		||||
        LocalStorage.set('permissions', response.data.permissions);
 | 
			
		||||
        LocalStorage.set('user', response.data.user);
 | 
			
		||||
        LocalStorage.set('session', response.data.session);
 | 
			
		||||
 | 
			
		||||
        void Router.push({ name: 'user' });
 | 
			
		||||
| 
						 | 
				
			
			@ -74,10 +73,17 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
 | 
			
		|||
        Loading.hide();
 | 
			
		||||
      });
 | 
			
		||||
  },
 | 
			
		||||
  logout({ commit }, token) {
 | 
			
		||||
  logout ({ commit }, token) {
 | 
			
		||||
    void axios.delete(`/auth/${token}`).then(() => {
 | 
			
		||||
      commit('setPermissions', []);
 | 
			
		||||
      commit('setToken', {
 | 
			
		||||
      commit('setUser', {
 | 
			
		||||
        display_name: '',
 | 
			
		||||
        firstname: '',
 | 
			
		||||
        lastname: '',
 | 
			
		||||
        mail: '',
 | 
			
		||||
        roles: [],
 | 
			
		||||
        userid: ''
 | 
			
		||||
      });
 | 
			
		||||
      commit('setSession', {
 | 
			
		||||
        browser: '',
 | 
			
		||||
        expires: '',
 | 
			
		||||
        lifetime: '',
 | 
			
		||||
| 
						 | 
				
			
			@ -86,39 +92,43 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
 | 
			
		|||
      });
 | 
			
		||||
    });
 | 
			
		||||
  },
 | 
			
		||||
  loadFromLocalStorage({ commit }) {
 | 
			
		||||
  loadFromLocalStorage ({ commit }) {
 | 
			
		||||
    console.log('load from store');
 | 
			
		||||
    let data = LocalStorage.getItem('permissions');
 | 
			
		||||
    commit('setPermissions', data ? data : []);
 | 
			
		||||
    let data = LocalStorage.getItem('user');
 | 
			
		||||
    commit('setUser', data ? data : {
 | 
			
		||||
      display_name: '',
 | 
			
		||||
      firstname: '',
 | 
			
		||||
      lastname: '',
 | 
			
		||||
      mail: '',
 | 
			
		||||
      roles: [],
 | 
			
		||||
      userid: ''
 | 
			
		||||
    });
 | 
			
		||||
    data = LocalStorage.getItem('session');
 | 
			
		||||
    commit(
 | 
			
		||||
      'setSession',
 | 
			
		||||
      data
 | 
			
		||||
        ? data
 | 
			
		||||
        : {
 | 
			
		||||
            browser: '',
 | 
			
		||||
            expires: new Date(),
 | 
			
		||||
            lifetime: -1,
 | 
			
		||||
            platform: '',
 | 
			
		||||
            token: ''
 | 
			
		||||
          }
 | 
			
		||||
          browser: '',
 | 
			
		||||
          expires: new Date(),
 | 
			
		||||
          lifetime: -1,
 | 
			
		||||
          platform: '',
 | 
			
		||||
          token: ''
 | 
			
		||||
        }
 | 
			
		||||
    );
 | 
			
		||||
    commit('showState');
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const getters: GetterTree<UserStateInterface, StateInterface> = {
 | 
			
		||||
  permissions({ permissions }) {
 | 
			
		||||
    return permissions;
 | 
			
		||||
  user ({ user }) {
 | 
			
		||||
    return user;
 | 
			
		||||
  },
 | 
			
		||||
  session({ session }) {
 | 
			
		||||
  session ({ session }) {
 | 
			
		||||
    return session;
 | 
			
		||||
  },
 | 
			
		||||
  loginLoading({ loginLoading }) {
 | 
			
		||||
  loginLoading ({ loginLoading }) {
 | 
			
		||||
    return loginLoading;
 | 
			
		||||
  },
 | 
			
		||||
  displayName({ session: { user } }) {
 | 
			
		||||
    return `${user.firstname} ${user.lastname}`;
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue