目錄

• 工具:
  
• 登入場景：
  
• 實踐：
  
• 場景1思考與實踐
  
• 場景2思考與實踐
  
• 總結

工具:

chorme瀏覽器安裝. devtools方便除錯

登入場景：

頁面的導航處或其他地方有時會顯示使用者現在的登入狀態，狀態可分為：未登入，正在登入（loading），登入成功並顯示使用者名稱。

有些頁面是不需要登入就可以讓使用者瀏覽的，但是有些頁面必須登入才可以進入瀏覽。

實踐：

場景1思考與實踐

用vuex建立一個數據倉庫

//src目錄下新建一個store目錄，建立index.js如下
//建立資料倉庫
import Vuex from 'vuex';
import vue from 'vue';
import loginUser from 'loginhttp://www.cppcns.com
 
User.js'
Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {  //modules 可以把不同的狀態單獨的放在一個物件裡面
        loginUser //是否正在登入中
    },strict: true,//只允許通過mutations改變狀態
});

設定登入狀態loading和當前登入使用者user

//建立一個loginUser.js，建立他的state/mutations/actions

//需要維護的狀態
state: {
       loading: false,//登入狀態
       user: null,//當前登入的使用者
       },//計算屬性
getters: {
       status(state) {
           if (state.loading) {
               return 'loading'
           } else if (state.user) {
               return 'login'
           } else {
               return 'unLogin'
           }
       }
   },//改變loading和user狀態 
mutations: {
       //設定loading
       setLoading(state,msg) {
           state.loading = msg
       },//設定使用者
       setUser(state,msg) {
           state.user = msg
       }
   },//actions中提交改變的狀態  
 actions: {
       //登陸方法ctx相當於storegNwBhjNNMc
 

       async login(ctx,msg) {
           //登陸狀態設定為true
           ctx.commit("setLoading",true)
           const result = await xxxapi.login(msg.loginId,msg.loginPassword)
           if (result) {
               //登入成功
               ctx.commit('setUser',result)
               //登陸成功後登陸狀態設定為false
               ctx.commit('setLoading',false)
           }
           //返回登陸是否成功
           return result
       },//判斷是否已登入
       async isLogin(ctx) {
           //正在登入中
           ctx.commit('setLoading',true)
           //調介面是否登陸
           const result = await xxxapi.isLogin();
           ctx.commit('setUser',result);
           ctx.commit('setLoading',false)
       },//登出
       async logout(ctx) {
           ctx.commit('setLoading',false)
           await xxxapi.logout();
           ctx.commit('setUser',null);
           ctx.commit('setLoading',false)
       }
   },

頁面使用：

在登入時,有一個登入按鈕，按鈕的狀態我們就可以在Vuex的倉庫中獲取

<button :disabled="loading">{{ loading ? 'loading...' : '登入' }}
</button>
computed: {
//在computed中封裝一下loading，不用每次呼叫都寫this.$store.state.loginUser這一堆
    // loading() {
    //  return this.$store.state.loginUser.loading;
    // }
    // 優化
    //輔助函式
    //import {mapState} from "vuex"
    ...mapState({
      loading: (state) => state.loginUser.loading
    })
  }

點選按鈕的時候提交的時候分發action

async handleSubmit() {
      const result = await this.$store.dispatch("loginUser/login",{
        loginId: this.loginId,loginPassword: this.loginPassword
      });
      if (result) {
        //  登入成功 路由跳轉
        const path = this.$route.query.url || '/'
        this.$router.push(path)
      }
    },

頁面的導航中切換顯示此時的登入狀態[loading/login/unlogin]

  <!--      顯示頁面登入狀態-->
<span v-if="status === 'loading'">正在登入請稍等...</span>
​
<template v-else-if="status === 'login'">
    <span>當前登入使用者{{user.name}}</span>
    <span @click="handleLogout">退出</span>
</template>
​
<router-link to="/login" v-else>
        登入
</router-link>
  computed: {
...mapGetters("loginUser",["status"]),...mapState("loginUser",["user"]),}

登出時 更改狀態

async handleLogouthttp://www.cppcns.com(){
    await this.$store.dispatch("loginUser/logout")
    //跳轉到登陸頁面
    this.$route.push(/xxx)
},每次頁面重新整理需要檢測登入狀態，在main.js中,也就是vue建立的時候就要判斷。
store.dispatch('loginUser/isLogin')

場景2思考與實踐

參考了後臺專案中的許可權設定

總體設計：

重新整理頁面後，在Vuex倉庫中先檢測此時登入狀態–> 導航守衛（router.beforeEach）通過判斷meta中設定的引數檢測此頁面是否

需要登入後才能檢視 -->頁面渲染。

整體邏輯：

1.進入頁面時判斷此頁面是否需要登入才能檢視

2.判斷登入狀態。有三種狀態如下：

1. 如果已經登入了就直接進入想去的頁面。
2. 如果沒登入，就進入登入頁面讓使用者登入。
3. 如果狀態是載入中(loading)，要傳入想去的頁面的路徑，並在加gNwBhjNNMc載中頁面監控Vuex倉庫中使用者登入狀態的變化，監聽狀態變化完了之後，此時要不就是已經登入了，要不就是沒有登入的狀態，然後再走第1步判斷是否要登入許可權。
   

實踐：

在router中設定meta,如果auth為true就是需要登入才能訪問

//routes.js中
import Home from "./xx/xx.vue"
export default[
{
      path:"/home",component:Home,meta: {
      auth: true,//需要許可權才可以訪問的頁面
    }
}
]
在index.js中設定路由守衛
router.beforeEach((to,from,next) => {
    if (to.meta.auth) {
        // 需要登入許可權才可以訪問
        const result = store.getters["loginUser/status"]
        if (result === 'loading') {
            //    載入狀態，不知道有沒有登入
            //    跳轉一個正在登入中頁面,並且要在頁面中監控是否已經登入成功了，要不然會永遠停留在這裡
            //    並且路由跳轉的時候得記錄你之前是從哪裡過來的，要不然不知道要跳轉到哪一個頁面
            next({
                path: '/loading',//去【正在登入中】的頁面
                query: {
                    url: to.fullpath
                }
            })
        } else if (result === 'login') {
            // 登入成功了
            next();
        } else {
            //    沒有登入
           thttp://www.cppcns.comhis.$message.info('你需要登入');
             next({
                path: '/login',//去【正在登入中】的頁面
                query: {
                    url: to.fullpath
                }
            })
        }
    } else {
        //不需要登入許可權就可以訪問的頁面
        next()
    }
})

在logining【正在登入中】頁面中監控此時的狀態

created() {
  this.unWatch = this.$watch(() => this.$store.getters["loginUser/status"],(status) => {
    console.log('此時的狀態',status);
    if (status !== 'loading'){
      this.$router.push(this.$route.query.url || '/home').catch(() => {}
    }
  },{
    immediate: true
  })
},destroyed() {
  //取消監控
  this.unWatch()
}

總結

到此這篇關於vuex專案中登入狀態管理的文章就介紹到這了,更多相關vuex登入狀態管理內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！