이제 vuex가 로그인 상태 저장을 구현하고 로그인되지 않은 상태에서 검색을 허용하지 않는 방법에 대한 기사를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.
기본 아이디어는 vuex 상태 관리를 사용하여 로그인 상태를 저장한 다음(실제로는 토큰과 같은 값을 저장한다는 의미) 라우팅 점프 전에 로그인 상태를 판단하는 것입니다. vue-router의 글로벌 프론트 가드를 사용할 수 있습니다. beforeEach 또는 경로 전용 가드 beforeEnter를 사용할 수 있습니다.
Navigation Guard
이름에서 알 수 있듯이 vue-router에서 제공하는 네비게이션 가드는 주로 점프나 취소로 네비게이션을 보호하는 데 사용됩니다. 경로 네비게이션 프로세스에 포함될 수 있는 기회는 여러 가지가 있습니다: 글로벌, 개별 경로별 또는 구성 요소 수준 매개 변수 또는 쿼리에 대한 변경 사항은 $route 객체를 관찰하거나 구성 요소 내 beforeRouteUpdate를 사용하여 이러한 변경 사항에 대응할 수 있습니다. 탐색 파싱 프로세스 완료
2. 비활성화된 구성 요소에서 Leave Guard를 호출합니다. 4. beforeRouteUpdate 가드를 호출합니다. +) 5. 라우팅 구성에 진입하세요.
7. 전역 beforeResolve를 호출하세요. 10. 11. DOM 업데이트를 실행합니다. 12. 생성된 인스턴스를 사용하여 next에 전달된 콜백 함수를 호출합니다. 글로벌 프론트 가드 등록const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... })
다음 메서드를 호출해야 합니다. 그렇지 않으면 후크가 해결되지 않습니다.
경로 전용 가드라우팅 구성에서 beforeEnter 가드를 직접 정의할 수 있습니다.const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] })
vuex를 설치한 후
Create store.jsimport Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); const state = { isLogin: 0 } const mutations = { changeLogin(state,status){ state.isLogin = status; } } const actions = { loginAction({commit}){ commit('changeLogin',1); } } export default new Vuex.Store({ state, actions, mutations })
login.vue
import { mapActions, mapState } from 'vuex' 도입 로그인 상태가 변경되면 base_url은 경로export default { name: 'Login', data(){ return{ loginForm: { username: '', password: '', }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, ], password: [ { required: true, message: '请输入密码', trigger: 'blur' } ], }, showLogin: false } }, mounted(){ this.showLogin = true; }, computed: { ...mapState(['isLogin']) }, methods: { ...mapActions(['loginAction']), submitForm(formName){ this.$refs[formName].validate((valid) => { if(valid){ if(this.loginForm.username == 'aaa' && this.loginForm.password == '111'){ console.log('验证通过'); this.loginAction(); this.$router.push('manage'); }else{ console.log('账号密码出错'); // this.$message.error('账号密码出错'); this.$message({ type: 'error', message: '账号密码出错' }); } console.log('请求地址: ' + base_url); }else{ console.log('验证失败'); return false; } }) } } }
beforeEach 사용 예router.beforeEach((to,from,next)=>{
if(to.meta.check){
var check = async function(){
const result = await checkUser();
if(result.status == 0){
next();
}else{
alert('用户未登录');
next({path: '/login'});
}
}
check(); //后台验证session
}else{
next();
}
})
export default new Router({ routes: [ { path: '/login', component: Login }, { path: '/manage', name: '', component: Manage, beforeEnter: (to,from,next)=> { //导航守卫 console.log(to) console.log(from) if(store.state.isLogin == 1){ console.log('用户已经登录'); next(); }else{ console.log('用户未登录'); next({path: '/login',query:{ Rurl: to.fullPath}}); //未登录则跳转到登陆界面,query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来 } } } ] })
Node.js 등록 이메일 활성화 기능 구현 방법의 예
Webpack의 babel-loader 파일 전처리기에 대한 자세한 설명
jQuery 뉴스 방송 스크롤 및 페이드인 구현 예 페이드아웃 효과
위 내용은 vuex를 사용하여 로그인 상태를 저장하고 비로그인 상태에서 검색을 비활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!