我尝试用以下逻辑在vuejs中创建一个导航卫士:阻止所有必需的auth路由,并在用户未通过身份验证时重定向到login,但允许用户登录的登录路由除外,它不会挂起(循环)(这是我一直坚持的部分)。当用户通过身份验证并尝试访问受限路由或非受限路由时,允许访问。
所以基本上我希望允许用户访问非限制路由,允许登录,并在未经身份验证时阻止对限制路由的访问。
如果我对我的逻辑没有意义,请纠正我,因为我已经在这个问题上停留了一段时间,可能需要其他人的观点。
这是密码。
代码主要来自我在bezkoder.com上遵循的教程,然后我参加了maximilian schwarzmuller的udemy上的vue课程,他向我介绍了导航卫士。这是我第一次使用它们,所以请耐心等待。
主要.js
import { createApp } from 'vue'
import router from './router/index.js';
import App from './App.vue'
import TheNav from './components/TheNav.vue'
import { store } from './store/index.js';
import VueParticles from 'vue-particles';
var app = createApp(App);
router.beforeEach((to, from, next) => {
if(to.path !== '/login' && to.meta.requiredAuth && !store.getters.isAuthenticated){
next('/login');
return
} else if (from.path === '/login' && to.meta.requiredAuth && store.getters.isAuthenticated){
next();
return
} else if (!to.meta.requiredAuth && store.getters.isAuthenticated){
next();
return
} else if (to.meta.requiredAuth && store.getters.isAuthenticated){
next();
return
} else {
next();
}
})
app.use(router);
app.use(store);
app.config.productionTip = false;
app.component('app-nav', TheNav);
app.use(VueParticles);
app.mount('#app');
auth.module.js在store/index.js中导出auth模块。所以是商店。
import AuthService from '../services/auth.service';
const user = JSON.parse(localStorage.getItem('user'));
const initialState = user
? { status: { loggedIn: true }, user }
: { status: { loggedIn: false }, user: null };
export const auth = {
namespaced: true,
state: initialState,
actions: {
login({ commit }, user) {
return AuthService.login(user).then(
user => {
commit('loginSuccess', user);
return Promise.resolve(user);
},
error => {
commit('loginFailure');
return Promise.reject(error);
}
);
},
logout({ commit }) {
AuthService.logout();
commit('logout');
},
register({ commit }, user) {
return AuthService.register(user).then(
response => {
commit('registerSuccess');
return Promise.resolve(response.data);
},
error => {
commit('registerFailure');
return Promise.reject(error);
}
);
}
},
mutations: {
loginSuccess(state, user) {
state.status.loggedIn = true;
state.user = user;
},
loginFailure(state) {
state.status.loggedIn = false;
state.user = null;
},
logout(state) {
state.status.loggedIn = false;
state.user = null;
},
registerSuccess(state) {
state.status.loggedIn = false;
},
registerFailure(state) {
state.status.loggedIn = false;
}
},
getters: {
isAuthenticated(state){
return state.status.loggedIn;
}
}
};
这是完整的项目。我不能发布所有的代码,因为这里太多了。https://github.com/mupml/peoplezone-spring-security-spring-boot-vue.js
正如我所提到的,我的方法可能存在根本性的缺陷。
如果有必要的话,我相信这不是问题所在。我希望不会。mysql数据库。
https://github.com/mupml/person-search-spring-boot-vue-security
我遇到的问题是,它可以很好地阻止受限制的路由,但是当我尝试登录时,它什么也不做。
1条答案
按热度按时间hjqgdpho1#
我修好了。在每次完成之前,使用console.log进行一点调试。我通过存储访问的getters方法显示为未定义,因此,在满足每个条件之前,没有一个条件。这是我现在的代码,它似乎正在工作。我将getter从isauthenticated更改为直接访问存储状态。我知道getters练习起来更好,但没用。可能是因为它在main.js中,而不是在vue组件中。