Vue3.0商店後臺管理系統項目實戰-路由守衛（登錄狀態儲存）

參考資料

Vue3.0官方文檔：https://cn.vuejs.org/
Element Plus文檔：https://element-plus.gitee.io/zh-CN/

路由守衛是什麼？

路由守衛是路由在跳轉前、後過程中的一些鉤子函數，這些函數可以讓你操作一些其他的事，在後臺管理中設置權限時經常看到，在實現路由跳轉前校驗是否有權限，有權限就可以通過，反之就會被執行其他操作，如返回首頁。

在store底下新建用戶登錄模塊js
userinfo.state.js

userinfo.state.js代碼

export default{
    state:{
        userInfo:{}
    },
    mutations:{
        setUserInfo(state,uInfo){
            state.userInfo=uInfo
        }
    }
}

並且在store/index.js裏面進行引入

import { createStore } from 'vuex'
import number from "./state/num.state.js"
import uInfo from "./state/userinfo.state.js"


export default createStore({
 
  //數據比較多，分模塊
  modules: {
    number,
    uInfo
  }
})

打開路由 router/index.js 進行配置

//路由守衛
router.beforeEach((to, from, next) => {
  //to:從哪個頁面
  //from:到那個頁面
  //next:只有執行next頁面纔會進行跳轉

  //判斷用戶是否登錄
  console.log("store", store.state.uInfo)
  const uInfo = store.state.uInfo.userInfo
  //判斷
  if (!uInfo.username) {
    if (to.path === "/login") {
      next()
      return
    }
    //未登錄 ,跳轉到login.vue
    next("/login")

  } else {
    next()
  }

})

打印一下 發現userinfo對象是空的

回到login.vue 寫一下登錄的邏輯

跳轉的話需要用到路由
需要引入

點擊按鈕 登錄到user頁面

 const handleLogin = () => {
      store.commit("setUserInfo", data.loginData);
      //跳轉user頁面
      router.push({
        path:"/user"
      })
    };

測試一下 登錄成功

路由守衛（登錄狀態儲存）
登錄到user頁面的時候 刷新頁面 又會跳轉到登錄界面，這個時候就需要將登錄狀態儲存起來了

在點擊登錄操作的時候，把用戶名和密碼做一個本地存儲的操作即可，在做初始化的時候 ，需要拿到本地存儲裏面信息做初始化 ，這樣就完美啦

login.vue

 const handleLogin = () => {
      store.commit("setUserInfo", data.loginData);
      localStorage.setItem("loginData",JSON.stringify(data.loginData))
      
      //跳轉user頁面
      router.push({
        path:"/user"
      })
    };

userinfo.state.js

export default{
    state:{
       // userInfo:{}
       //將字符串轉化成對象
       userInfo:( localStorage.getItem("loginData")&&JSON.parse(localStorage.getItem("loginData")))||{}
      
    },
    mutations:{
        setUserInfo(state,uInfo){
            state.userInfo=uInfo
        }
    }
}

在瀏覽器就能看到登錄的用戶名和密碼了

在登錄的時候存儲，在退出系統的時候 需要清除一下存儲
退出按鈕

  <el-button type="danger" @click="loginOut()">退出</el-button>

事件

<script>
import  {useStore} from "vuex"
//引入路由
import { useRouter } from "vue-router";
const router = useRouter();
export default {
  name: "layout",
  setup() {

    const store =useStore()
    const router = useRouter();

    const loginOut = () => {
      localStorage.removeItem("loginData");
      store.commit("setUserInfo",{})
      //跳轉
      router.push({
        path:"/login"
      })
    };
    return {
      loginOut,
    };
  },
};
</script>