introduce vuex
This commit is contained in:
parent
94d2a98b96
commit
a408cae686
24
package-lock.json
generated
24
package-lock.json
generated
@ -21,7 +21,8 @@
|
||||
"sass": "^1.37.5",
|
||||
"sass-loader": "^10.2.0",
|
||||
"vue": "^3.0.0",
|
||||
"vue-router": "^4.0.0-0"
|
||||
"vue-router": "^4.0.0-0",
|
||||
"vuex": "^4.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/code-frame": {
|
||||
@ -13335,6 +13336,18 @@
|
||||
"integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/vuex": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
|
||||
"integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.0.0-beta.11"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/watchpack": {
|
||||
"version": "1.7.5",
|
||||
"resolved": "https://registry.nlark.com/watchpack/download/watchpack-1.7.5.tgz?cache=0&sync_timestamp=1621437900992&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwatchpack%2Fdownload%2Fwatchpack-1.7.5.tgz",
|
||||
@ -25940,6 +25953,15 @@
|
||||
"integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
|
||||
"dev": true
|
||||
},
|
||||
"vuex": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
|
||||
"integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@vue/devtools-api": "^6.0.0-beta.11"
|
||||
}
|
||||
},
|
||||
"watchpack": {
|
||||
"version": "1.7.5",
|
||||
"resolved": "https://registry.nlark.com/watchpack/download/watchpack-1.7.5.tgz?cache=0&sync_timestamp=1621437900992&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwatchpack%2Fdownload%2Fwatchpack-1.7.5.tgz",
|
||||
|
@ -20,6 +20,7 @@
|
||||
"sass": "^1.37.5",
|
||||
"sass-loader": "^10.2.0",
|
||||
"vue": "^3.0.0",
|
||||
"vue-router": "^4.0.0-0"
|
||||
"vue-router": "^4.0.0-0",
|
||||
"vuex": "^4.0.2"
|
||||
}
|
||||
}
|
||||
|
17
src/App.vue
17
src/App.vue
@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
<header v-if="this.$route.path.includes('/s/')">
|
||||
<Navbar />
|
||||
</header>
|
||||
<router-view />
|
||||
<router-view :key="$route.fullPath" />
|
||||
<Footer />
|
||||
</template>
|
||||
<script>
|
||||
@ -16,21 +16,10 @@ import Footer from '@/components/Footer.vue'
|
||||
import Navbar from '@/components/Navbar.vue'
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
name: 'App',
|
||||
components: {
|
||||
Footer,
|
||||
Navbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
memberId: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.memberId = localStorage.getItem("user_id");
|
||||
},
|
||||
updated() {
|
||||
this.memberId = localStorage.getItem("user_id");
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
@ -58,8 +58,9 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import RequestMixin from "@/mixins/request.mixin"
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
import RequestMixin from "@/mixins/request.mixin"
|
||||
import ProfileList from "@/components/ProfileList";
|
||||
|
||||
export default {
|
||||
@ -87,6 +88,9 @@ export default {
|
||||
showErrorMessage: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['currentUserId'])
|
||||
},
|
||||
methods: {
|
||||
addResult(result = false) {
|
||||
if (!result) result = this.searchResults[0];
|
||||
@ -98,7 +102,7 @@ export default {
|
||||
|
||||
let changeValues = Object.assign(this.values);
|
||||
let newValue = {
|
||||
profile_id: localStorage.getItem("user_id"),
|
||||
profile_id: this.currentUserId,
|
||||
};
|
||||
if (this.type != "contacttype") {
|
||||
newValue.level = 1;
|
||||
|
@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
<span class="d-sm-none">KI</span>
|
||||
</router-link>
|
||||
<button
|
||||
@click="showMobileNavbar = !showMobileNavbar"
|
||||
@click="toggleMobileNav"
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
aria-controls="navbarSupportedContent"
|
||||
@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
</button>
|
||||
<div
|
||||
class="collapse navbar-collapse"
|
||||
:class="{ show: showMobileNavbar }"
|
||||
:class="{ show: showMobileNav }"
|
||||
id="navbarSupportedContent"
|
||||
>
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
class="nav-link"
|
||||
:to="{ path: `/s/profile/${$root.memberId}` }"
|
||||
:to="{ path: `/s/profile/${currentUserId}` }"
|
||||
active-class="active"
|
||||
>Mein Profil</router-link
|
||||
>
|
||||
@ -86,21 +86,29 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
<script>
|
||||
|
||||
import RequestMixin from "@/mixins/request.mixin"
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
import RequestMixin from '@/mixins/request.mixin'
|
||||
|
||||
export default {
|
||||
name: "Navbar",
|
||||
name: 'Navbar',
|
||||
mixins: [RequestMixin],
|
||||
data() {
|
||||
return {
|
||||
showMobileNavbar: false,
|
||||
searchText: ''
|
||||
searchText: '',
|
||||
showMobileNav: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['currentUserId'])
|
||||
},
|
||||
methods: {
|
||||
toggleMobileNav() {
|
||||
this.showMobileNav = !this.showMobileNav
|
||||
},
|
||||
logout() {
|
||||
localStorage.clear();
|
||||
this.$router.push({ path: "/" });
|
||||
this.$store.dispatch('clear')
|
||||
this.$router.push({ path: '/' });
|
||||
},
|
||||
searchRedirect() {
|
||||
this.$router.push({ path: `/s/search?text`, query: { query: this.searchText } } );
|
||||
|
@ -5,12 +5,14 @@
|
||||
import { createApp } from 'vue/dist/vue.esm-bundler'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from '@/store'
|
||||
|
||||
import './assets/global.scss'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(router)
|
||||
app.use(store)
|
||||
|
||||
app.config.globalProperties.apiUrl = window.ki.apiUrl
|
||||
|
||||
|
@ -2,6 +2,8 @@
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
import store from '@/store'
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
async submitLogin() {
|
||||
@ -26,8 +28,8 @@ export default {
|
||||
}
|
||||
|
||||
const responseData = await response.json()
|
||||
localStorage.setItem('token', responseData.token);
|
||||
localStorage.setItem('user_id', responseData.user_id);
|
||||
store.commit('setCurrentUserId', parseInt(responseData.user_id, 10))
|
||||
store.commit('setToken', responseData.token)
|
||||
this.$router.push({ path: '/s/search' });
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
@ -38,7 +40,7 @@ export default {
|
||||
try {
|
||||
const response = await fetch(`${this.apiUrl}/${this.type}s?search=${this.searchText}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
Authorization: `Bearer ${store.state.token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
@ -65,13 +67,13 @@ export default {
|
||||
}
|
||||
},
|
||||
async initEditPage() {
|
||||
const userId = localStorage.getItem('user_id')
|
||||
const userId = store.state.currentUserId
|
||||
const url = `${this.apiUrl}/users/${userId}/profile`
|
||||
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`
|
||||
Authorization: `Bearer ${store.state.token}`
|
||||
},
|
||||
}
|
||||
);
|
||||
@ -94,11 +96,11 @@ export default {
|
||||
try {
|
||||
const body = JSON.stringify(this.profile)
|
||||
const response = await fetch(
|
||||
`${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
|
||||
`${this.apiUrl}/users/${store.currentUserId}/profile`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
Authorization: `Bearer ${store.state.token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body
|
||||
@ -119,7 +121,7 @@ export default {
|
||||
async initViewPage() {
|
||||
try {
|
||||
const response = await fetch(`${this.apiUrl}/users/${this.$route.params.memberId}/profile`, {
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
||||
headers: { Authorization: `Bearer ${store.state.token}` },
|
||||
}
|
||||
);
|
||||
|
||||
@ -128,7 +130,7 @@ export default {
|
||||
}
|
||||
|
||||
const responseData = await response.json()
|
||||
this.profile = responseData.profile;
|
||||
store.commit('setCurrentProfile', responseData.profile)
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
@ -145,7 +147,7 @@ export default {
|
||||
|
||||
const response = await fetch(url, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
Authorization: `Bearer ${store.state.token}`,
|
||||
},
|
||||
});
|
||||
|
||||
|
@ -3,6 +3,9 @@
|
||||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
import store from '@/store'
|
||||
|
||||
import Index from '@/views/Index.vue'
|
||||
import Search from '@/views/Search.vue'
|
||||
import Edit from '@/views/profile/Edit.vue'
|
||||
@ -16,9 +19,9 @@ const routes = [
|
||||
template: "<router-view/>",
|
||||
},
|
||||
beforeEnter: (to, from, next) => {
|
||||
if(localStorage.getItem('token') !== null){
|
||||
if (store.state.token){
|
||||
next()
|
||||
}else{
|
||||
} else {
|
||||
next({path: '/', query: {url: to.fullPath, access: false}})
|
||||
}
|
||||
},
|
||||
@ -52,4 +55,4 @@ const router = createRouter({
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
export default router
|
||||
|
50
src/store.js
Normal file
50
src/store.js
Normal file
@ -0,0 +1,50 @@
|
||||
// SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
import { createStore } from 'vuex'
|
||||
|
||||
const localStorageKeys = {
|
||||
currentUserId: 'ki_current_user_id',
|
||||
token: 'ki_token',
|
||||
}
|
||||
|
||||
export default createStore({
|
||||
state() {
|
||||
return {
|
||||
currentUserId: JSON.parse(localStorage.getItem(localStorageKeys.currentUserId)),
|
||||
token: JSON.parse(localStorage.getItem(localStorageKeys.token)),
|
||||
currentProfile: null
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
clearCurrentUserId(state) {
|
||||
state.currentUserId = null
|
||||
localStorage.removeItem(localStorageKeys.currentUserId)
|
||||
},
|
||||
setCurrentUserId(state, currentUserId) {
|
||||
state.currentUserId = currentUserId
|
||||
localStorage.setItem(
|
||||
localStorageKeys.currentUserId,
|
||||
JSON.stringify(currentUserId)
|
||||
)
|
||||
},
|
||||
clearToken(state) {
|
||||
state.token = null
|
||||
localStorage.removeItem(localStorageKeys.token)
|
||||
},
|
||||
setToken(state, token) {
|
||||
state.token = token
|
||||
localStorage.setItem(localStorageKeys.token, JSON.stringify(token))
|
||||
},
|
||||
setCurrentProfile(state, profile) {
|
||||
state.currentProfile = profile
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
clear(context) {
|
||||
context.commit('clearCurrentUserId')
|
||||
context.commit('clearToken')
|
||||
}
|
||||
}
|
||||
})
|
@ -40,9 +40,11 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import RequestMixin from "@/mixins/request.mixin"
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
import ProfileList from "@/components/ProfileList";
|
||||
import RequestMixin from '@/mixins/request.mixin'
|
||||
|
||||
import ProfileList from '@/components/ProfileList';
|
||||
|
||||
export default {
|
||||
name: "profileView",
|
||||
@ -50,10 +52,10 @@ export default {
|
||||
components: {
|
||||
ProfileList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
profile: null
|
||||
};
|
||||
computed: {
|
||||
...mapState({
|
||||
profile: 'currentProfile'
|
||||
})
|
||||
},
|
||||
async created() {
|
||||
await this.initViewPage();
|
||||
|
Loading…
Reference in New Issue
Block a user