六、Vue3+Ts+Vite+AntdUI构建后台基础模板——登录状态拦截

一、修改Mock接口

1. 新增用户数据userInfo

// mock/login.ts
......
export default [
    {
        ......
        response: ({ body }) => {
            return {
               ......
               data: {
                    // query: body,
                    token: Mock.Random.string('lower', 200),
                    // 用户信息
                    userInfo: {
                        id: Mock.Random.id(),
                        name: Mock.Random.cname(),
                        email: Mock.Random.email(),
                        gender: Mock.Random.natural(1, 2),
                        age: Mock.Random.natural(18, 30),
                    },
                },
            };
        },
    },
];

二、store模块新增user

1. 新增用户信息模块

// src/store/modules/user.ts
const user = {
    namespaced: true,
    state: {
        token: localStorage.getItem('token') || '',
        userInfo: JSON.parse(localStorage.getItem('userInfo') || '{}'),
    },
    getters: {},
    mutations: {
        setToken(state, token) {
            localStorage.setItem('token', token);
            state.token = token;
        },
        setUserInfo(state, userInfo) {
            localStorage.setItem('userInfo', JSON.stringify(userInfo));
            state.userInfo = userInfo;
        },
        clearToken(state) {
            localStorage.removeItem('token');
            state.token = '';
        },
        clearUser(state) {
            localStorage.removeItem('userInfo');
            state.userInfo = {};
        },
    },
    actions: {},
};

export default user;

1. 添加模块至store

// src/store/index.ts
......
import user from '@/store/modules/user';
......

export default createStore({
    ......
    modules: {
        loading,
        user,
    },
});

三、修改登录页功能

1. 加入用户信息存储

// src/views/Login/index.vue

......
import { useStore } from 'vuex';
......

......
setup() {
    ......
    const router = useRouter();
    const store = useStore();
    ......
    
    const onSubmit = () => {
        loginFormRef.value.validate().then(() => {
            LoginAPI.setLogin(toRaw(loginForm)).then((res) => {
                    console.log(res);
                    store.commit('user/setToken', res.token);
                    store.commit('user/setUserInfo', res.userInfo);
                    router.push({ path: '/' });
            });
        });
    };
    ......
}
......

四、修改请求封装

1. 修改token加入header

//src/request/http.ts

......
const Fetch = ({
    ......
}: AxiosConfig) => {
    ......
    if (localStorage.getItem('token')) {
        Object.assign(headers, {
            token: localStorage.getItem('token'),
        });
    }
    ......
};
......

五、新增路由拦截

1. 登录状态才能进入其他页面
2. 非登录状态只能进入登录页面

// src/router/index.ts

......
import store from '@/store';

const routes = [
    ......
];

const router = createRouter({
    ......
});

router.beforeEach((to, from, next) => {
    if (to.name !== 'Login' && !localStorage.getItem('token')) {
        next({ name: 'Login' });
    } else {
        next();
    }
});

export default router;

六、源代码地址

https://github.com/jiangzetian/vue3-admin-template

七、视频演示及源码

本文演示视频：点击浏览

更多前端内容欢迎关注公众号：天小天个人网