Vuex는 로그인한 사람과 로그인하지 않은 사람에 대해 서로 다른 권한을 구현합니다.

이번에는 로그인과 비로그인에 대해 서로 다른 권한을 구현하는 vuex를 소개하겠습니다. 로그인과 비로그인에 대해 서로 다른 권한을 구현하는 vuex의 notes는 무엇입니까?

기본 아이디어는 vuex 상태 관리를 사용하여 로그인 상태를 저장한 다음(실제로는 토큰과 같은 값을 저장한다는 의미) 라우팅 점프 전에 로그인 상태를 판단하는 것입니다. 또는 Enter 전에 라우팅 독점 가드를 사용할 수 있습니다.

네비게이션 가드

이름에서 알 수 있듯이 vue-router에서 제공하는 내비게이션 가드는 주로 점프 또는 취소를 통해 내비게이션을 보호하는 데 사용됩니다. 전역, 취소 등 경로 탐색 프로세스에 포함될 수 있는 기회가 많습니다. 단일 경로 또는 구성 요소 수준에만 적용됩니다. 매개변수나 쿼리를 변경해도 탐색 가드 입력/나가기가 트리거되지 않는다는 점을 기억하세요. $route를 관찰하면 이 작업을 수행할 수 있습니다. 이러한 변경 사항을 처리하는 개체를 사용하거나 구성 요소 내에서 beforeRouteUpdate 가드를 사용하세요.

완벽한 탐색 분석 프로세스

1. 내비게이션이 실행됩니다.

2. 비활성화된 구성 요소에서 휴가 가드를 호출합니다.

3. 각 가드 이전에 전역을 호출합니다.

4. 재사용된 구성 요소에서 beforeRouteUpdate 가드(2.2+)를 호출합니다.

5. 라우팅 구성에서 Enter 전에 전화하십시오.

6. 비동기 라우팅 구성 요소를 구문 분석합니다.

7. 활성화된 구성 요소에서 beforeRouteEnter를 호출합니다.

8. 전역 beforeResolve 가드(2.5+)를 호출합니다.

9. 내비게이션이 확인되었습니다.

10. AfterEach 후크 전역을 호출합니다.

11. DOM 업데이트를 트리거합니다.

12. 생성된 인스턴스를 사용하여 beforeRouteEnter 가드에서 next로 전달된 콜백 함수를 호출합니다.

글로벌 가드

router.beforeEach를 사용하여 가드 전 전역을 등록할 수 있습니다

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})

내비게이션이 실행되면 생성된 순서대로 글로벌 프론트 가드가 호출됩니다. Guard는 비동기적으로 구문 분석되고 실행되며 모든 Guard가 해결될 때까지 탐색이 대기됩니다.

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

to: Route: 진입하려는 대상 라우팅 객체

from: 경로: 현재 내비게이션이 출발하려는 경로

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

next(): 파이프라인의 다음 후크로 진행합니다. 모든 Hook이 실행되면 탐색 상태가 확인됩니다.

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 설치 후

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 in

'vuex'

에서 import { mapActions,mapState }를 소개합니다. 그런 다음 로그인 상태를 변경하세요. 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;
          }
        })
      }
    }
  }

다음으로, 루트 가드를 사용하세요

각 사용 예 전

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}表示把当前路由信息传递过去方便登录后跳转回来
     }
   } 
    }
   ]
})

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue.js底部导航栏的子路由不显示怎么处理

AngularJS怎么重新加载路由页面

위 내용은 Vuex는 로그인한 사람과 로그인하지 않은 사람에 대해 서로 다른 권한을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!