vuex進階實戰-用戶登錄及權限控制

項目文件結構 ▼

├── src                         # 源代碼
│   ├── router                  # 路由
│   │   ├── index.js            
│   ├── store                   # 全局 store管理
│   │   ├── index.js            
│   │   ├── state.js            # 數據倉庫（數據的唯一來源）
│   │   ├── mutations.js        # 修改數據
│   ├── views                   # views 所有頁面
│   │   ├── Login.vue             # 登錄
│   │   ├── Home.vue              # 首頁
│   ├── App.vue                 # 入口頁面
│   ├── main.js                 # 入口文件 加載組件 初始化等

 

src/router/index.js ▼

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const router = new VueRouter({
  mode: "hash",
  base: "/",
  routes: [
  {
    path: "/",
    name: "Home",
    component: () => import("../views/Home.vue")
  },
  {
    path: "/login",
    name: "Login",
    component: () => import("../views/Login.vue")
  }
  ]
});
export default router;

 

src/store/index.js ▼

import Vue from "vue";
  import Vuex from "vuex";
  import state from "./state";
  import mutations from "./mutations";
  Vue.use(Vuex);
  export default new Vuex.Store({
    state, // 數據倉庫（數據的唯一來源）
    getters: {}, // 用來獲取數據（計算屬性）
    mutations, // 用來修改數據的（相當於function，同步）
    actions: {}, // 用來提交mutation（異步）
    modules: {} // 模塊化
  });

 

src/store/state.js ▼

export default {
    // 個人信息
    userInfos: undefined
  };

 

src/store/mutations.js ▼

export default {
    login(state, data) {
      state.userInfos = data;
    }
  };

 

src/views/Login.vue▼

<template>
  <div>
    <form>
      用戶名:
      <input type="text" name="username" v-model="form.username" />
      密碼
      <input type="password" name="password" v-model="form.password" />
      <input @click="onSubmit" value="登錄" />
    </form>
  </div>
<template>

<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: undefined,
        password: undefined
      },
    }
  },
  methods: {
    onSubmit() {
      this.$store.commit("login","落花看風雪"); // 此處存入用戶信息
 this.$router.push("./"); // 跳轉到首頁
    }
  }
}
</script>

 

src/main.js ▼

import Vue from "vue";
import App from "./App.vue";
import router from "./router"; // 路由
import store from "./store"; // 引用vuex

// VueRouter導航守衛 無登陸信息直接跳轉到登陸頁面
router.beforeEach((to, from, next) => {
  if (store.state.userInfo || to.path("/login")) {
    next();
  } else {
    next({
      path: "/login"
    });
  }
});
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

src/App.vue▼

<template>
    <div id="app">
      <router-view />
    </div>
  </template>
  
  <script>
  export default {
    name: "app"
  };
  </script>

 

src/views/Home.vue▼

<template>
  <div>歡迎來到首頁</div>
</template>

<script>
export default {
  name: "Home"
};
</script>