sora_front/src/views/LoginPage.vue

<template>
    <div class="login_page">
        <div class="login_content">
            <div class="login_content_body">
                <img class="login_logo" src='@/assets/images/login_logo.png'>
                <div class="login_form_content">
                    <img class="login_form_logo" src='@/assets/images/home_logo.png'>
                    <a-input class="login_form_input" size="large" placeholder="account" v-model:value="username">
                        <template #prefix>
                            <span class="icon iconfont icon-yonghuming form_icon_content"></span>
                        </template>
                    </a-input>
                    <a-input type="password" class="login_form_input" size="large" v-model:value="password" placeholder="password" >
                        <template #prefix>
                            <span class="icon iconfont icon-weibiaoti form_icon_content"></span>
                        </template>
                    </a-input>
                    <a-checkbox class="form_checkbox" v-model:checked="isRemember">Remenber Me</a-checkbox>
                    <a-button class="login_button" size="large" type="primary" @click="submitPerLogin">Login</a-button>
                </div>
            </div>
            <div class="login_footer_content">copyright ©2023  CodeCreate</div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent,onMounted,ref,reactive } from "vue";  
import { Https } from "@/tool/https";
import { setCookie } from "@/tool/cookie";
import { message } from "ant-design-vue";
import { useRouter } from 'vue-router'
import { encode, decode } from 'js-base64';

export default defineComponent({
    name:'login',
    setup(){
        const router = useRouter()
        let username = ref('')
        let password = ref('')
        let isRemember = ref(false)
        let menuList:any = reactive([{
            name:'Workdesk',
            code:'WORK_BENCH',
            route:'/home/worktable',
            icon:'icon-gongzuotai',
            key:'/home/worktable',
            isShow:false,
        },
        {
            name:'Product Management',
            code:'PRODUCT_LIST',
            route:'/home/productmanage',
            icon:'icon-shangpinguanli',
            key:'/home/productmanage',
            isShow:false,
        },
        {
            name:'Store Management',
            code:'STORE_LIST',
            route:'/home/storemanage',
            icon:'icon-mendianguanli',
            key:'/home/storemanage',
            isShow:false,
        },
        {
            name:'Label Management',
            code:'LABEL_LIST',
            route:'/home/labelmanage',
            icon:'icon-biaoqian',
            key:'/home/labelmanage',
            isShow:false,
        },
        {
            name:'Setting',
            code:'SYS_MANAGER',
            route:'',
            icon:'icon-xitongguanli',
            key:'sub2',
            expandIcon:'icon-xialajiantouxiao',
            isShow:false,
            children:[
                {
                    code:'USER_MANAGER',
                    name:'User Management',
                    route:'/home/usermanage',
                    icon:'',
                    key:'/home/usermanage',
                    isShow:false,
                },
                {
                    code:'ROLE_MANAGER',
                    name:'Access Permission',
                    route:'/home/rolemanage',
                    icon:'',
                    key:'/home/rolemanage',
                    isShow:false,
                },
            ]
        },
		{
            name:'Report Exporting',
            code:'REPORT_EXPORTING',
            route:'/home/exportExcil',
            icon:'icon-xiazaiwenjian',
            key:'/home/exportExcil',
            isShow:false,
        },
		// {
        //     name:'Export Excil',
        //     code:'EXPORT_EXCIL',
        //     route:'/home/exportExcil',
        //     icon:'icon-xiazaiwenjian',
        //     key:'sub3',
        //     key:'/home/exportExcil',
        //     expandIcon:'icon-xialajiantouxiao',
        //     isShow:true,
        //     children:[
        //         {
        //             code:'USER_MANAGER',
        //             name:'User Management',
        //             route:'/home/excil1',
        //             icon:'',
        //             key:'/home/excil1',
        //             isShow:true,
        //         },
        //         {
        //             code:'ROLE_MANAGER',
        //             name:'Access Permission',
        //             route:'/home/excil2',
        //             icon:'',
        //             key:'/home/excil2',
        //             isShow:true,
        //         },
        //     ]
        // }
		])

        let submitPerLogin = () =>{
            if (!username) {
                message.error("Please enter your account");
                return;
            }
            if(!password){
                message.error("Please enter your password");
                return;
            }
            let data = {
                userAccount: username.value,
                password: encode(password.value),
            };
            Https.axiosPost(Https.httpUrls.accountLogin, data).then(
                (rv: any) => {
                    if (rv) {
                        let token = rv.token;
                        setCookie("token", token);
                        setCookie("userInfo", JSON.stringify(rv));
                        rememberAccount()
                        getMenuRole()
                    }
                }
            );
        }

        let rememberAccount = () =>{
            if(isRemember){
                let accountInfo = {
                    account:username.value,
                    password:password.value,
                }
                localStorage.setItem('accountInfo',JSON.stringify(accountInfo))
            }
        }

          let getMenuRole = () =>{
            Https.axiosGet(Https.httpUrls.queryUsrPermission).then(
                (rv: any) => {
                    if (rv) {
                        let rolePermission = rv.rolePermission.level1ResourceList
                        let setMenuListShow = (role:any) =>{
                            for(let menu of menuList){
								
                                if(role.code === menu.code){
                                    menu.isShow = role.select == 1 ? true :false
                                    if(role.operationList){
                                        menu.operationList = role.operationList
                                    }
                                    break
                                }
                                if(menu.children){
                                    for(let child of menu.children){
                                        if(role.code == child.code){
                                            child.isShow = role.select == 1 ? true :false
                                            if(role.operationList){
                                                child.operationList = role.operationList
                                            }
                                            break
                                        }
                                    }
                                }
                                
                            }
                        }
                        
                        for(let role of rolePermission){
                            setMenuListShow(role)
                            for(let level2 of role.level2ResourceList){
                                setMenuListShow(level2)
                            }
                        }
                        sessionStorage.setItem('menuList',JSON.stringify(menuList))
                        let worktable = menuList.filter((v:any) => v.code === 'WORK_BENCH')[0]
                        if(worktable.isShow){
                            router.push("/home/worktable")
                        }else{
                            message.error('You do not have permission to access this website, please contact your manager.')
                        }
                        
                    }
                }
            );
        }

        onMounted(()=>{
            if(localStorage.getItem('accountInfo')){
                let accountInfo:any = localStorage.getItem('accountInfo')
                accountInfo = JSON.parse(accountInfo)
                username.value = accountInfo.account
                password.value = accountInfo.password
                isRemember.value = true
            }
        })

        return {
            username,
            password,
            isRemember,
            submitPerLogin,
        }
    },
   
});
</script>
<style lang="less" scoped>
.login_page {
    width: 100%;
    height: 100%;

    .login_content{
        width: 1440px;
        margin: 0 auto;
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        
        .login_content_body{
            width: 100%;
            padding: 0 160px 0 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .login_logo{
                width: 457px;
                height: 370px;
            }


            .login_form_content{
                width: 600px;
                height: 540px;
                padding: 0 60px;
                box-sizing: border-box;
                background: #FFFFFF;
                box-shadow: -3px 20px 59px 0px rgba(200,200,200,0.3);
                border-radius: 10px;

                .login_form_logo{
                    width: 165px;
                    margin: 78px auto 60px;
                    display: block;
                }

                .login_form_input{
                    width: 480px;
                    height: 50px;
                    border: 1px solid #DFDFDF;
                    border-radius: 25px;
                    margin-bottom: 29px;
                }

                .form_checkbox{
                    font-size: 16px;
                    color: #151515;
                    margin-bottom: 29px;

                    .ant-checkbox-inner{
                        width: 20px;
                        height: 20px;
                        border: 1px solid #DFDFDF;
                        border-radius: 4px;
                    }
                }

                .form_icon_content{
                    font-size: 18px;
                    color: #343579;
                }
                
                .login_button{
                    display: block;
                    width: 100%;
                    height: 50px;
                    background: #343579;
                    border-radius: 25px;
                    font-size: 18px;
                    font-family: Roboto;
                    font-weight: 500;
                    color: #FFFFFF;
                }
            }
        }

        .login_footer_content{
            width: 100%;
            font-size: 13px;
            font-family: Roboto;
            font-weight: 400;
            color: #151515;
            text-align: center;
            position: absolute;
            bottom: 68px;
        }
    }

    
}

</style>
<style lang="less">
.login_page {
    .ant-input-prefix{
        margin: 0px 15px;
    }
    .ant-input-affix-wrapper:focus{
        border-color: #343579 !important;
        box-shadow: none;
    }
    .ant-input-affix-wrapper-focused{
        border-color: #343579 !important;
        box-shadow: none;
    }
}

</style>