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>