项目业务＜Login逻辑＞

最新推荐文章于 2022-12-22 18:04:50 发布

独鹿DT

最新推荐文章于 2022-12-22 18:04:50 发布

阅读量160

点赞数 2

分类专栏：项目文章标签：项目封装 login逻辑 localStorage

本文链接：https://blog.csdn.net/weixin_47529373/article/details/119358798

版权

项目专栏收录该内容

13 篇文章 4 订阅

订阅专栏

语法补充

组件使用instanceType<typeof .... >: .vue文件export的对象是组件的描述，是有着具体值的对象，在template内使用的是根据组件描述创建的实例，这个组件描述是不能直接作为一个类型的。该语法可以得到具有构造函数的实例对象，这时才可以作为一个类型传入 ref

localStorage的封装

class LocalCache {
  setCache(key: string, value: any) {
    window.localStorage.setItem(key, JSON.stringify(value));
  }
  getCache(key: string) {
    const value = window.localStorage.getItem(key);
    if (value) {
      return JSON.parse(value);
    }
  }
  deleteCache(key: string) {
    window.localStorage.removeItem(key);
  }
  clearCache() {
    window.localStorage.clear();
  }
}

export default new LocalCache();

逻辑部分
对网络请求的数据用Vuex分模块进行存储，同时需要在本地缓存一份，因为有时已经登陆，在其他页面点击刷新按钮，vuex内的数据是在内存里面的，那么刷新后数据就会消失，此时就可以从本地的缓存的数据进行重新加载。

登陆的逻辑步骤：

1、将账号密码进行验证，返回结果
2、获取用户的基本信息
3、获取主页的信息。(因为是管理系统，那么不同角色的主页面是不一致的)
4、数据的保存
5、页面跳转

如果同时在login组件内进行如此多的步骤，有些步骤是和本组件的关系是不相关的，其实这部分逻辑可以在vuex的action内进行。

import { Module } from "vuex";
import router from "@/router";

import {
  accountLoginRequest,
  userInfoRequest,
  userMenuRequest
} from "@/service/login";
import { AccountLoginType } from "@/service/login/types";
import localCache from "@/utils/cache";

import { RootStateType } from "../types";
import { LoginStateType } from "./types";

const loginModule: Module<LoginStateType, RootStateType> = {
  namespaced: true,
  state() {
    return {
      token: "",
      userInfo: {},
      userMenus: []
    };
  },
  getters: {},
  mutations: {
    changeToken(state, token: string) {
      state.token = token;
    },
    changeUserInfo(state, payload: any) {
      state.userInfo = payload;
    },
    changeUserMenus(state, payload: any) {
      state.userMenus = payload;
    }
  },
  actions: {
    async accountLoginAction(context, payload: AccountLoginType) {
      // 登陆信息
      const loginResult = await accountLoginRequest(payload);
      const { id, token } = loginResult.data;
      context.commit("changeToken", token);
      localCache.setCache("token", token);
      // 登陆后用户信息
      const userInfoResult = await userInfoRequest(id);
      context.commit("changeUserInfo", userInfoResult.data);
      localCache.setCache("userInfo", userInfoResult.data);
      //请求用户菜单
      const userMenuResult = await userMenuRequest(id);
      context.commit("changeUserMenus", userMenuResult.data);
      localCache.setCache("userMenus", userMenuResult.data);
      // 路由跳转
      router.push("/main");
    },
    uploadAction(context) {
    // 刷新时直接从本地获取
      const token = localCache.getCache("token");
      if (token) {
        context.commit("changeToken", token);
      }
      const userInfo = localCache.getCache("userInfo");
      if (userInfo) {
        context.commit("changeUserInfo", userInfo);
      }
      const userMenus = localCache.getCache("userMenus");
      if (userMenus) {
        context.commit("changeUserMenus", userMenus);
      }
    }
  }
};

export default loginModule;