微信小程序-EventChannel

前言

本文基于之前的项目配置代码进行讲解

tdesign使用

具体的安装大家可以参考官网

我这里介绍下最简单的使用方式

安装

npm i tdesign-vue-next

main.ts引入

import { createApp } from 'vue';
import TDesign from 'tdesign-vue-next'; //全局导入
import 'tdesign-vue-next/es/style/index.css';// 导入样式
import router from './router';
import App from './App.vue';
import { store } from './store';
import './permission';

const app = createApp(App);

app.use(TDesign); // 全局使用
app.use(router);
app.use(store);
app.mount('#app');

使用

这里我就不写了，我就copy一份官网的代码，大家可以看下效果

实现登录效果

讲解login.vue中的登录逻辑

讲一下登录这块,首先是校验通过，如果校验通过则调用我们登录的接口，成功了之后进行路由跳转。

const onSubmit = async (ctx: SubmitContext) => {
  if (ctx.validateResult === true) {
    try {
      await userStore.login(formData.value);

      MessagePlugin.success('登录成功');
      const redirect = route.query.redirect as string;
      const redirectUrl = redirect ? decodeURIComponent(redirect) : '/home';
      router.push(redirectUrl);
    } catch (e) {
      console.log(e);
      MessagePlugin.error(e.message);
    }
  }
};

模拟登录请求

async login(userInfo: Record<string, unknown>) {
    const mockLogin = async (userInfo: Record<string, unknown>) => {
        // 登录请求流程
    console.log(`用户信息:`, userInfo);
    return {
        code: 200,
        message: '登录成功',
        data: 'main_token',
    };
    };

    const res = await mockLogin(userInfo);
    if (res.code === 200) {
        this.token = res.data;
    } else {
        throw res;
    }
},

模拟一个用户信息接口

async getUserInfo() {
      const mockRemoteUserInfo = async (token: string) => {
        if (token === 'main_token') {
          return {
            name: 'Codesigner-admin',
            roles: ['all'], 
          };
        }
        return {
          name: 'Codesigner-normal',
          roles: ['normal'], 
        };
      };
      const res = await mockRemoteUserInfo(this.token);

      this.userInfo = res;
    },

退出登录

UserInfo的类型

export interface UserInfo {
  name: string;
  roles: string[];
}

退出登录代码

import type { UserInfo } from '@/types/interface';

const InitUserInfo: UserInfo = {
  name: '', // 用户名
  roles: [], // 权限
};

async logout() {
    this.token = '';
    this.userInfo = { ...InitUserInfo };
},

完整的userStore代码

此时，我们完整的userStore代码如下，这里我将persist: true开启，这样我们的数据就会持久化，下一次进来依旧可以不用登录(因为数据在localStorage中)

import { defineStore } from 'pinia';
import { store } from '@/store';
import type { UserInfo } from '@/types/interface';

const InitUserInfo: UserInfo = {
  name: '', // 用户名
  roles: [], // 权限
};

export const useUserStore= defineStore('user', {
  state: () => ({
   token:"",
   userInfo: { ...InitUserInfo },
  }),
  actions: {
    async login(userInfo: Record<string, unknown>) {
      const mockLogin = async (userInfo: Record<string, unknown>) => {
        // 登录请求流程
        console.log(`用户信息:`, userInfo);
        return {
          code: 200,
          message: '登录成功',
          data: 'main_token',
        };
      };

      const res = await mockLogin(userInfo);
      if (res.code === 200) {
        this.token = res.data;
      } else {
        throw res;
      }
    },
    async getUserInfo() {
      const mockRemoteUserInfo = async (token: string) => {
        if (token === 'main_token') {
          return {
            name: 'Codesigner-admin',
            roles: ['all'], 
          };
        }
        return {
          name: 'Codesigner-normal',
          roles: ['normal'], 
        };
      };
      const res = await mockRemoteUserInfo(this.token);

      this.userInfo = res;
    },
    async logout() {
      this.token = '';
      this.userInfo = { ...InitUserInfo };
    },
  },
  persist: true
});

export function getUserStore() {
  return useUserStore(store);
}

修改permission.ts

这里我新增了路由跳转有token的时候获取下用户信息,路由跳转结束之后地址是login的把登录信息去除

import router from '@/router';
import {  useUserStore } from '@/store';
import { getPermissionStore } from '@/store';
router.beforeEach(async (to,from,next)=>{
    // console.log(to,from,next)
    const userStore = useUserStore();
    const permissionStore = getPermissionStore();
    const { whiteListRouters } = permissionStore;
    if (userStore.token) {
        await userStore.getUserInfo();
        if (to.path === '/login') {
          next();
          return;
        }
        try {
          if (router.hasRoute(to.name)) {
            next();
          } else {
            next(`/`);
          }
        } catch (error) {
          next({
            path: '/login',
            query: { redirect: encodeURIComponent(to.fullPath) },
          });
        }
    } else {
        if (whiteListRouters.includes(to.path)) {
            next();
            return;
        }
        next({
            path: '/login',
            query: { redirect: encodeURIComponent(to.fullPath) },
        });
    }
})

router.afterEach((to) => {
  if (to.path === '/login') {
    const userStore = useUserStore();
    userStore.logout();
  }
});

此时，我们就有了登录效果，登录成功后跳转首页,这里我就首页展示的数据也对应修改了,效果如下

结语

本文就讲解到这里，更多内容敬请期待