vuex를 사용하여 로그인 상태를 저장하고 비로그인 상태에서 검색을 비활성화하는 방법은 무엇입니까?

이제 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) => {
 // ...
})

내비게이션이 실행되면 생성된 순서대로 글로벌 프론트 가드가 호출되며, 모든 가드가 해결될 때까지 네비게이션이 비동기적으로 실행됩니다.

각 가드 메소드는 세 가지 매개변수를 받습니다. :

to: Route: 진입하려는 대상 경로 객체

from: Route: 현재 내비게이션이 떠나려는 경로

next: 함수: 이 후크를 해결하려면 이 메서드를 호출해야 합니다. 효과는 next 메소드의 호출 매개변수에 따라 달라집니다.

next(): 모든 후크가 실행되면 탐색 상태가 확인됩니다(Confirmed).

next(false): 브라우저 URL이 변경되면 중단됩니다. 아마도 사용자 또는 브라우저 뒤로 버튼을 통해 수동으로) URL 주소는 from 경로에 해당하는 주소로 재설정됩니다. next('/') 또는 next({ path: '/' }): 다른 주소로 이동합니다. . 현재 탐색이 중단된 후 새 탐색이 수행됩니다.

next(error):(2.4.0 +) next에 전달된 매개변수가 Error 인스턴스인 경우 탐색이 종료되고 오류가 다음으로 전달됩니다. router.onError()에 의해 등록된 콜백.

다음 메서드를 호출해야 합니다. 그렇지 않으면 후크가 해결되지 않습니다.

경로 전용 가드

라우팅 구성에서 beforeEnter 가드를 직접 정의할 수 있습니다.

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   }
  }
 ]
})

다른 가드도 있습니다. 자세한 내용은 공식 문서 https://router.vuejs를 참조하세요. org/zh -cn/advanced/navigation-guards.html

vuex를 설치한 후

Create store.js

import 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();
  }
})

beforeEnter 사용 예

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!