[英]How to prevent user to go to login page after logged in in Vuejs?
After the user is logged in i dont want the user to access the log in page.用户登录后,我不希望用户访问登录页面。 I have tried this one down below but it's seem like it's not working.
我已经在下面尝试过这个,但它似乎不起作用。 What should I do to make it works?
我应该怎么做才能使它工作?
[Updated] [更新]
When I console.log(store.getters.loggedIn
inside else if
statement it returns false so I think the problem maybe is with store.getters
. Since I'm a beginner in Vuejs I'm really not sure how to fix it. I will add my vuex code down below. Hope I can get some helps.当我
console.log(store.getters.loggedIn
inside else if
语句返回 false 时,我认为问题可能出在store.getters
。由于我是 Vuejs 的初学者,我真的不知道如何解决它。我将在下面添加我的 vuex 代码。希望我能得到一些帮助。
Thanks before hand!先谢谢了!
// vuex
export default new Vuex.Store({
state: {
accessToken: null,
refreshToken: null,
APIData: "",
},
mutations: {
updateStorage(state, { access, refresh }) {
state.accessToken = access;
state.refreshToken = refresh;
},
destroyToken(state) {
state.accessToken = null;
state.refreshToken = null;
},
},
getters: {
loggedIn(state) {
return state.accessToken != null;
},
},
actions: {
userLogout(context) {
console.log("hello");
if (context.getters.loggedIn) {
context.commit("destroyToken");
}
},
userLogin(context, usercredentials) {
return new Promise((resolve, reject) => {
getAPI
.post("/rest-api-token/", {
email: usercredentials.email,
password: usercredentials.password,
})
.then((response) => {
context.commit("updateStorage", {
access: response.data.access,
refresh: response.data.refresh,
});
resolve();
console.log(this.getters.loggedIn); <-- return true
})
.catch((err) => {
reject(err);
});
});
},
},
modules: {},
});
// main.js
router.beforeEach((to, from, next) => {
if (to.matched.some((record) => record.meta.requiresLogin)) {
if (!store.getters.loggedIn) {
next({ name: "login" });
}
else {
next();
}
}
// if user is logged in and go to log in page redirect them to home page
else if (to.matched.some(record => record.meta.requiresVisitor)) {
if (store.getters.loggedIn) {
next({ name: 'home'});
}
else {
next();
}
}
//
else {
next();
}
});
//index.js (router)
const routes = [
{
path: "/",
name: "login",
component: Login,
meta: {
requiresVisitor: true,
},
},
{
path: "/home",
name: "home",
component: Home,
meta: {
requiresLogin: true,
},
},
{
path: "/logout",
name: "logout",
component: Logout,
},
];
i would add a state in my store called:我会在我的商店中添加一个状态,称为:
state: {
accessToken: null,
refreshToken: null,
APIData: "",
loggedIn: false //<<<<<<<<<<<<<<<<<<<<< HERE
},
then i would add a mutation for the Login Process, if the User Loggedin successfully然后我会为登录过程添加一个突变,如果用户登录成功
mutations: {
updateStorage(state, { access, refresh }) {
state.accessToken = access;
state.refreshToken = refresh;
},
destroyToken(state) {
state.accessToken = null;
state.refreshToken = null;
},
loginAttempt(state, payload) { //<<<<<<<<<<<<<<HERE
state.loggedIn = payload
}
},
and toggle the login state to true if success or false if failed.并将登录状态切换为 true 如果成功或 false 如果失败。
then i add a v-if="userIsLoggedIn" in your login component and be toggle the Login if user is not logged in and show the Login Component or hide it然后我在您的登录组件中添加一个 v-if="userIsLoggedIn" 并在用户未登录时切换登录并显示登录组件或隐藏它
of course the userIsLoggedIn
should be a computed:当然
userIsLoggedIn
应该是一个计算的:
computed: {
userIsLoggedIn: function() {
return this.$store.state.loggedIn
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.