vuex實現登陸與未登入不同權限

這次帶給大家vuex實現登陸與未登入不同權限，vuex實現登陸與未登入不同權限的注意事項有哪些，以下就是實戰案例，一起來看一下。

基礎想法就是使用vuex狀態管理來儲存登入狀態(其實就是存一個值，例如token)，然後在路由跳轉前進行登入狀態的判斷，可以使用vue-router的全域前置守衛beforeEach，也可以使用路由獨享的守衛beforeEnter。

導航守衛

如其名，vue-router" 提供的導航守衛主要用來透過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中：全局的, 單一路由獨享的, 或組件級的。 記住參數或查詢的改變並不會觸發進入/離開的導航守衛。你可以透過觀察 $route 物件來應對這些變化，或使用beforeRouteUpdate的元件內守衛。

完整的導航解析流程

# 1、導航被觸發。

2、在失活的元件裡呼叫離開守衛。

3、呼叫全域的 beforeEach 守衛。

4.在重複使用的元件裡呼叫 beforeRouteUpdate 守衛 (2.2 )。

5、在路由配置裡呼叫 beforeEnter。

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

當一個導航觸發時，全域前置守衛會按照建立順序呼叫。守衛是非同步解析執行，此時導航在所有守衛 resolve 完成之前一直處於 等待中。

每個守衛方法接收三個參數：

to: Route:即將要進入的目標 路由物件

from: Route:目前導航正要離開的路由

# next: Function:一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next 方法的呼叫參數。

next():進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed （確認的）。

next(false):中斷目前的導航。如果瀏覽器的 URL 改變了（可能是使用者手動或瀏覽器後退按鈕），那麼 URL 位址會重設到 from 路由對應的位址。

next('/')或next({ path: '/' }): 跳到一個不同的位址。目前的導航被中斷，然後進行一個新的導航。

next(error):(2.4.0 ) 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會傳遞給 router.onError()註冊過的回呼。

確保要呼叫 next 方法，否則鉤子就不會被 resolved。

# 路由獨享的守衛

# 你可以在路由配置上直接定義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中

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

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

推荐阅读：

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

AngularJS怎么重新加载路由页面

以上是vuex實現登陸與未登入不同權限的詳細內容。更多資訊請關注PHP中文網其他相關文章！