Skip to content

Commit 265c32f

Browse files
duro06duro06
committed
menyelesaikan undefined error vue-router (vuejs/vue-router#2932)
1 parent a5a20aa commit 265c32f

File tree

7 files changed

+153
-122
lines changed

7 files changed

+153
-122
lines changed

‎src/App.vue

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</div>
66
<div>
77
<transition class="slideInLeft" v-wow data-wow-duration="1s">
8-
<router-view class="route" />
8+
<router-view :class="kelas" />
99
</transition>
1010
</div>
1111
<div>
@@ -30,6 +30,15 @@ export default {
3030
computed: {
3131
loggedIn() {
3232
return this.$store.getters.loggedIn;
33+
},
34+
kelas() {
35+
let kelas = "";
36+
if (this.loggedIn) {
37+
kelas = "route";
38+
} else {
39+
kelas = "";
40+
}
41+
return kelas;
3342
}
3443
}
3544
// watch: {
@@ -41,14 +50,17 @@ export default {
4150
// }
4251
};
4352
</script>
44-
45-
<style lang="scss">
46-
@import "./assets/css/animate.css";
47-
@import "~bulma";
53+
<style scooped>
4854
.route {
4955
padding-top: 55px;
5056
padding-bottom: 55px;
5157
}
58+
</style>
59+
60+
<style lang="scss">
61+
@import "./assets/css/animate.css";
62+
@import "~bulma";
63+
5264
#app {
5365
font-family: Avenir, Helvetica, Arial, sans-serif;
5466
-webkit-font-smoothing: antialiased;

‎src/components/LoginTemplate.vue

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -187,9 +187,19 @@ export default {
187187
serverError: ""
188188
};
189189
},
190-
// computed: {
191-
192-
// },
190+
updated() {
191+
if (localStorage.getItem("access_token")) {
192+
this.$router.replace(
193+
this.$route.query.redirect || { name: "logged" },
194+
() => {}
195+
);
196+
}
197+
},
198+
computed: {
199+
logged() {
200+
return this.$store.getters.loggedIn;
201+
}
202+
},
193203
methods: {
194204
signup() {
195205
this.$router.replace("/signup");
@@ -202,20 +212,17 @@ export default {
202212
203213
if (vm.Vpass == true && vm.Vmail == true) {
204214
vm.loading = "is-loading";
215+
const params = new URLSearchParams();
216+
params.append("email", vm.email);
217+
params.append("password", vm.password);
205218
vm.$store
206-
.dispatch("retrieveToken", {
207-
email: vm.email,
208-
password: vm.password
209-
})
210-
.then(response => {
211-
// console.log(response.data.data)
212-
const token = response.data.data.token;
213-
const level = response.data.data.level;
214-
localStorage.setItem("access_token", token);
215-
this.$store.commit("retrieveToken", token);
216-
this.$store.commit("setAccessLevel", level);
217-
vm.loading = "";
218-
vm.$router.replace("/logged");
219+
.dispatch("retrieveToken", params)
220+
.then(respons => {
221+
if (respons && vm.logged) {
222+
vm.loading = "";
223+
vm.$router.replace({ name: "logged" }, () => {});
224+
}
225+
console.log(vm.logged);
219226
})
220227
.catch(error => {
221228
vm.loading = "";

‎src/components/auth/Logout.vue

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,18 @@ export default {
66
created() {
77
this.$store
88
.dispatch("destroyToken")
9-
.then(this.$router.replace(this.$route.query.redirect || "/login"))
10-
.catch(this.$router.replace(this.$route.query.redirect || "/login"));
9+
.then(
10+
this.$router.replace(
11+
this.$route.query.redirect || { name: "login" },
12+
() => {}
13+
)
14+
)
15+
.catch(
16+
this.$router.replace(
17+
this.$route.query.redirect || { name: "login" },
18+
() => {}
19+
)
20+
);
1121
}
1222
};
1323
</script>

‎src/main.js

Lines changed: 37 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -24,64 +24,43 @@ Vue.use(vWow);
2424
// Vue.use(Pusher);
2525

2626
// This callback runs before every route change, including on page load.
27-
router.beforeEach((to, from, next) => {
28-
// This goes through the matched routes from last to first, finding the closest route with a title.
29-
// eg. if we have /some/deep/nested/route and /some, /deep, and /nested have titles, nested's will be chosen.
30-
const nearestWithTitle = to.matched.slice().reverse().find(r => r.meta && r.meta.title);
31-
32-
// Find the nearest route element with meta tags.
33-
const nearestWithMeta = to.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
34-
// const previousNearestWithMeta = from.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
35-
36-
// If a route with a title was found, set the document (page) title to that value.
37-
if (nearestWithTitle) document.title = nearestWithTitle.meta.title;
38-
39-
// Remove any stale meta tags from the document using the key attribute we set below.
40-
Array.from(document.querySelectorAll('[data-vue-router-controlled]')).map(el => el.parentNode.removeChild(el));
41-
42-
// Skip rendering meta tags if there are none.
43-
if (!nearestWithMeta) return next();
44-
45-
// Turn the meta tag definitions into actual elements in the head.
46-
nearestWithMeta.meta.metaTags.map(tagDef => {
47-
const tag = document.createElement('meta');
48-
49-
Object.keys(tagDef).forEach(key => {
50-
tag.setAttribute(key, tagDef[key]);
51-
});
52-
53-
// We use this to track which meta tags we create, so we don't interfere with other ones.
54-
tag.setAttribute('data-vue-router-controlled', '');
55-
56-
return tag;
57-
})
58-
// Add the meta tags to the document head.
59-
.forEach(tag => document.head.appendChild(tag));
60-
61-
next();
62-
});
63-
64-
router.beforeEach((to, from, next) => {
65-
if (to.matched.some(record => record.meta.requiresVisitor)) {
66-
if (store.getters.loggedIn) {
67-
next({
68-
path: "/logged"
69-
});
70-
} else {
71-
next();
72-
}
73-
} else if (to.matched.some(record => record.meta.requiresAuth)) {
74-
if (!store.getters.loggedIn) {
75-
next({
76-
path: "/"
77-
});
78-
} else {
79-
next();
80-
}
81-
} else {
82-
next(); // make sure to always call next()!
83-
}
84-
});
27+
// router.beforeEach((to, from, next) => {
28+
// // This goes through the matched routes from last to first, finding the closest route with a title.
29+
// // eg. if we have /some/deep/nested/route and /some, /deep, and /nested have titles, nested's will be chosen.
30+
// const nearestWithTitle = to.matched.slice().reverse().find(r => r.meta && r.meta.title);
31+
32+
// // Find the nearest route element with meta tags.
33+
// const nearestWithMeta = to.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
34+
// // const previousNearestWithMeta = from.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
35+
36+
// // If a route with a title was found, set the document (page) title to that value.
37+
// if (nearestWithTitle) document.title = nearestWithTitle.meta.title;
38+
39+
// // Remove any stale meta tags from the document using the key attribute we set below.
40+
// Array.from(document.querySelectorAll('[data-vue-router-controlled]')).map(el => el.parentNode.removeChild(el));
41+
42+
// // Skip rendering meta tags if there are none.
43+
// if (!nearestWithMeta) return next();
44+
45+
// // Turn the meta tag definitions into actual elements in the head.
46+
// nearestWithMeta.meta.metaTags.map(tagDef => {
47+
// const tag = document.createElement('meta');
48+
49+
// Object.keys(tagDef).forEach(key => {
50+
// tag.setAttribute(key, tagDef[key]);
51+
// });
52+
53+
// // We use this to track which meta tags we create, so we don't interfere with other ones.
54+
// tag.setAttribute('data-vue-router-controlled', '');
55+
56+
// return tag;
57+
// })
58+
// // Add the meta tags to the document head.
59+
// .forEach(tag => document.head.appendChild(tag));
60+
61+
// next();
62+
// });
63+
8564

8665

8766
new Vue({

‎src/router/index.js

Lines changed: 36 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* eslint-disable */
22
import Vue from "vue";
33
import VueRouter from "vue-router";
4+
import store from "../store";
45
// import Login from '../views/Login.vue'
56

67
Vue.use(VueRouter);
@@ -18,22 +19,37 @@ const routes = [{
1819
// this generates a separate chunk (about.[hash].js) for this route
1920
// which is lazy-loaded when the route is visited.
2021
component: () => import( /* webpackChunkName: "about" */ "../views/Login.vue"),
21-
meta: {
22-
requiresVisitor: true
22+
beforeEnter: (to, from, next) => {
23+
if (store.state.loggedIn == true) {
24+
next("/logged");
25+
} else {
26+
next();
27+
}
2328
}
2429
},
2530
{
2631
path: "/signup",
2732
name: "signup",
2833
component: () => import("../components/auth/SignUp.vue"),
29-
meta: {
30-
requiresVisitor: true
31-
}
34+
// beforeEnter: (to, from, next) => {
35+
// if (store.state.loggedIn == true) {
36+
// next("/logged");
37+
// } else {
38+
// next();
39+
// }
40+
// }
3241
},
3342
{
3443
path: "/test",
3544
name: "test",
36-
component: () => import("../views/Test.vue")
45+
component: () => import("../views/Test.vue"),
46+
// beforeEnter: (to, from, next) => {
47+
// if (store.state.waitingVerified == true) {
48+
// next("/login");
49+
// } else {
50+
// next();
51+
// }
52+
// }
3753
},
3854
{
3955
path: "/home",
@@ -44,9 +60,13 @@ const routes = [{
4460
path: "/logged",
4561
name: "logged",
4662
component: () => import("../views/Logged.vue"),
47-
meta: {
48-
requiresAuth: true
49-
}
63+
// beforeEnter: (to, from, next) => {
64+
// if (!store.state.loggedIn) {
65+
// next("/login");
66+
// } else {
67+
// next();
68+
// }
69+
// }
5070
},
5171
{
5272
path: "/logout",
@@ -59,9 +79,13 @@ const routes = [{
5979
component: () =>
6080
import(
6181
"../components/LoginTemplate.vue"),
62-
meta: {
63-
requiresVisitor: true
64-
}
82+
// beforeEnter: (to, from, next) => {
83+
// if (store.state.loggedIn) {
84+
// next("/logged");
85+
// } else {
86+
// next();
87+
// }
88+
// }
6589
},
6690
{
6791
path: "/level3",

‎src/store/modules/user.js

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -91,39 +91,38 @@ export default {
9191
"Bearer " + context.state.token;
9292

9393
if (context.getters.loggedIn) {
94-
return new Promise((resolve, reject) => {
95-
axios
96-
.post("api/user/logout")
97-
.then(response => {
98-
localStorage.removeItem("access_token");
99-
context.commit("destroyToken");
100-
resolve(response);
101-
// console.log(response);
102-
// context.commit('addTodo', response.data)
103-
})
104-
.catch(error => {
105-
localStorage.removeItem("access_token");
106-
context.commit("destroyToken");
107-
reject(error);
108-
});
109-
});
94+
// return new Promise((resolve, reject) =>
95+
// {
96+
// axios
97+
// .post("api/user/logout")
98+
// .then(
99+
// response => {
100+
localStorage.removeItem("access_token"), context.commit("destroyToken");
101+
// resolve(response);
102+
// console.log(response);
103+
// context.commit('addTodo', response.data)
104+
// }
105+
// )
106+
// .catch(
107+
// localStorage.removeItem("access_token"),
108+
// context.commit("destroyToken")
109+
// // reject(error);
110+
// );
111+
// });
110112
}
111113
},
112114
retrieveToken(context, credentials) {
113115
return new Promise((resolve, reject) => {
114-
const params = new URLSearchParams();
115-
params.append("email", credentials.email);
116-
params.append("password", credentials.password);
117116
axios
118-
.post("api/user/login", params)
117+
.post("api/user/login", credentials)
119118
.then(response => {
120119
// console.log(response.data.data)
121-
// const token = response.data.data.token;
122-
// const level = response.data.data.level;
120+
const token = response.data.data.token;
121+
const level = response.data.data.level;
122+
localStorage.setItem("access_token", token);
123+
context.commit("retrieveToken", token);
124+
context.commit("setAccessLevel", level);
123125
resolve(response);
124-
// localStorage.setItem("access_token", token);
125-
// context.commit("retrieveToken", token);
126-
// context.commit("setAccessLevel", level);
127126
})
128127
.catch(error => {
129128
// console.log(error)

‎src/views/Test.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
data-wow-duration="2s"
4646
>
4747
<h3 class="notification berhasil">Anda sudah terverifikasi</h3>
48-
<a to="/" class="button is-small is-rounded is-danger">
48+
<a @click="pindah" class="button is-small is-rounded is-danger">
4949
Klik untuk Login
5050
</a>
5151
</div>
@@ -84,9 +84,9 @@ export default {
8484
8585
8686
methods: {
87-
// pindah(){
88-
// this.$router.replace("/")
89-
// },
87+
pindah(){
88+
this.$router.replace({ name: "login" })
89+
},
9090
subscribe () {
9191
// const vm = this
9292
// Api key + cluster

0 commit comments

Comments
 (0)