session保存token

kongdeqiang

2023-04-26 cb5c9968b763362d399e1c7fce1129ec7434aba8

 src/views/login.vue

@@ -10,13 +10,7 @@
            <Col class="content">
            <div>
                <Header />
                <div v-if="!socialLogining">
                    <Tabs v-model="tabName">
                        <TabPane
                                :label="$t('usernameLogin')"
                                name="username"
                                icon="md-person"
                        >
                <div v-if="!socialLogining" style="margin-top: 150px">
                            <Form
                                    ref="usernameLoginForm"
                                    :model="form"
@@ -24,13 +18,16 @@
                                    class="form"
                                    v-if="tabName == 'username'"
                            >
                                <FormItem>
                                    <h1 style="margin-left: 40%;">登&nbsp陆</h1>
                                </FormItem>
                                <FormItem prop="username">
                                    <Input
                                            v-model="form.username"
                                            prefix="ios-contact"
                                            size="large"
                                            clearable
                                            placeholder="账号/邮箱/手机号"
                                            placeholder="账号"
                                            autocomplete="off"
                                    />
                                </FormItem>
@@ -74,70 +71,24 @@
                                    </Row>
                                </FormItem>
                            </Form>
                        </TabPane>
                        <TabPane
                                :label="$t('mobileLogin')"
                                name="mobile"
                                icon="ios-phone-portrait"
                        >
                            <Form
                                    ref="mobileLoginForm"
                                    :model="form"
                                    :rules="rules"
                                    class="form"
                                    v-if="tabName == 'mobile'"
                            >
                                <FormItem prop="mobile">
                                    <Input
                                            v-model="form.mobile"
                                            prefix="ios-phone-portrait"
                                            size="large"
                                            clearable
                                            placeholder="请输入手机号"
                                    />
                                </FormItem>
                                <FormItem prop="code" :error="errorCode">
                                    <Row type="flex" justify="space-between">
                                        <Input
                                                v-model="form.code"
                                                prefix="ios-mail-outline"
                                                size="large"
                                                clearable
                                                placeholder="请输入短信验证码"
                                                :maxlength="6"
                                                class="input-verify"
                                        />
                                        <CountDownButton
                                                ref="countDown"
                                                @on-click="sendSmsCode"
                                                :autoCountDown="false"
                                                size="large"
                                                :loading="sending"
                                                :text="getSms"
                                        />
                                    </Row>
                                </FormItem>
                            </Form>
                        </TabPane>
                    </Tabs>

                    <Row justify="space-between" align="middle">
                        <Checkbox v-model="saveLogin" size="large">{{
                            $t("autoLogin")
                            }}</Checkbox>
                        <Dropdown trigger="click" @on-click="handleDropDown">
                            <a class="forget-pass">{{ $t("forgetPass") }}</a>
                            <DropdownMenu slot="list">
                                <DropdownItem name="test">体验测试账号</DropdownItem>
                                <DropdownItem name="resetByMobile"
                                >使用手机号重置密码(付费)</DropdownItem
                                >
                                <DropdownItem name="resetByEmail"
                                >使用邮箱重置密码(付费)</DropdownItem
                                >
                            </DropdownMenu>
                        </Dropdown>
                    </Row>
                    <!--<Row justify="space-between" align="middle">-->
                        <!--<Checkbox v-model="saveLogin" size="large">{{-->
                            <!--$t("autoLogin")-->
                            <!--}}</Checkbox>-->
                        <!--<Dropdown trigger="click" @on-click="handleDropDown">-->
                            <!--<a class="forget-pass">{{ $t("forgetPass") }}</a>-->
                            <!--<DropdownMenu slot="list">-->
                                <!--<DropdownItem name="test">体验测试账号</DropdownItem>-->
                                <!--<DropdownItem name="resetByMobile"-->
                                <!--&gt;使用手机号重置密码(付费)</DropdownItem-->
                                <!--&gt;-->
                                <!--<DropdownItem name="resetByEmail"-->
                                <!--&gt;使用邮箱重置密码(付费)</DropdownItem-->
                                <!--&gt;-->
                            <!--</DropdownMenu>-->
                        <!--</Dropdown>-->
                    <!--</Row>-->
                    <Button
                            class="login-btn"
                            type="primary"
@@ -149,65 +100,12 @@
                        <span v-if="!loading">{{ $t("login") }}</span>
                        <span v-else>{{ $t("logining") }}</span>
                    </Button>
                    <Row type="flex" justify="space-between" class="other-login">
                        <div class="other-way icons">
                            {{ $t("otherLogin") }}
                            <div class="other-icon" @click="toGithubLogin">
                                <Icon
                                        custom="iconfont icon-github"
                                        size="20"
                                        class="other-icon"
                                        @click="toGithubLogin"
                                />
                            </div>
                            <div class="other-icon" @click="toQQLogin">
                                <Icon custom="iconfont icon-qq" size="22" />
                            </div>
                            <div class="other-icon" @click="toWeixinLogin">
                                <Icon custom="iconfont icon-weixin" size="23" />
                            </div>
                            <Icon
                                    v-show="!showMore"
                                    type="ios-arrow-down"
                                    class="other-icon"
                                    size="16"
                                    @click="showMore = true"
                            ></Icon>
                            <div class="other-icon" v-show="showMore" @click="toWeiboLogin">
                                <Icon custom="iconfont icon-weibo" size="23" />
                            </div>
                            <div
                                    class="other-icon"
                                    v-show="showMore"
                                    @click="toDingdingLogin"
                            >
                                <Icon custom="iconfont icon-dingding" size="20" />
                            </div>
                            <div
                                    class="other-icon"
                                    v-show="showMore"
                                    @click="toWorkwechatLogin"
                            >
                                <Icon custom="iconfont icon-qiyeweixin" size="20" />
                            </div>
                            <Icon
                                    v-show="showMore"
                                    type="ios-arrow-up"
                                    class="other-icon"
                                    size="16"
                                    @click="showMore = false"
                            ></Icon>
                        </div>
                        <router-link to="/regist">
                            <a class="forget-pass">{{ $t("regist") }}</a>
                        </router-link>
                    </Row>
                </div>
                <div v-if="socialLogining">
                    <RectLoading />
                </div>
            </div>
            <Footer />
            <!--<Footer />-->
            </Col>
            <LangSwitch />
        </Row>
@@ -227,18 +125,13 @@

    <!--</div>-->


</template>

<script>
    import {
        login,
        userInfo,
        githubLogin,
        qqLogin,
        weiboLogin,
        wechatLogin,
        dingdingLogin,
        workwechatLogin,
        getJWT,
        sendLoginSms,
        smsLogin,
@@ -250,7 +143,7 @@
    import { validateMobile } from "@/libs/validate";
    import Cookies from "js-cookie";
    import Header from "@/views/main-components/header";
    import Footer from "@/views/main-components/footer";
    //import Footer from "@/views/main-components/footer";
    import LangSwitch from "@/views/main-components/lang-switch";
    import RectLoading from "@/views/my-components/xboot/rect-loading";
    import CountDownButton from "@/views/my-components/xboot/count-down-button";
@@ -263,7 +156,6 @@
            RectLoading,
            LangSwitch,
            Header,
            Footer,
            VueFurcateTree
        },
        data() {
@@ -302,7 +194,9 @@
                        ]
                    }
                ],
                sessionStorage: null,
                showMore: false,
                code:"",
                captchaId: "",
                captchaImg: "",
                loadingCaptcha: true,
@@ -315,45 +209,11 @@
                sending: false,
                errorCode: "",
                form: {
                    username: "test或test2 可注册 支持第三方账号登录",
                    password: "123456",
                    mobile: "阿里云短信0.045/条 若余额不足联系作者充值",
                    username: "",
                    password: "",
                    code: "",
                },
                rules: {
                    username: [
                        {
                            required: true,
                            message: "账号不能为空",
                            trigger: "change",
                        },
                    ],
                    password: [
                        {
                            required: true,
                            message: "密码不能为空",
                            trigger: "change",
                        },
                    ],
                    imgCode: [
                        {
                            required: true,
                            message: "验证码不能为空",
                            trigger: "change",
                        },
                    ],
                    mobile: [
                        {
                            required: true,
                            message: "手机号不能为空",
                            trigger: "change",
                        },
                        {
                            validator: validateMobile,
                            trigger: "change",
                        },
                    ],
                },
                showChangePass: false,
            };
        },
        methods: {
@@ -362,7 +222,8 @@
                initCaptcha().then((res) => {
                    this.loadingCaptcha = false;
                    if (res.success) {
                        this.captchaId = res.result;
                        this.code = res.result.code;
                        this.captchaId = res.result.captchaId;
                        this.captchaImg = drawCodeImage + this.captchaId;
                    }
                });
@@ -386,14 +247,15 @@
            },
            afterLogin(res) {
                let accessToken = res.result;
                this.setStore("accessToken", accessToken);
                console.log("login_afterLogin()",accessToken)
                this.setSessionStore("accessToken", accessToken);
                getOtherSet().then((res) => {
                    if (res.result) {
                        let domain = res.result.ssoDomain;
                        Cookies.set("accessToken", accessToken, {
                            domain: domain,
                            expires: 7,
                        });
                        // Cookies.set("accessToken", accessToken, {
                        //     domain: domain,
                        //     expires: 7,
                        // });
                    }
                });
                // 获取用户信息
@@ -422,7 +284,7 @@
                        util.initRouter(this);
                        // window.location.reload();
                        this.$router.push({
                            name: "home_index",
                            name: "home2",
                        });
                    } else {
                        this.loading = false;
@@ -431,6 +293,11 @@
            },
            submitLogin() {
                if (this.tabName == "username") {
                    if(this.code.toUpperCase()!=this.form.imgCode.toUpperCase()){
                        this.$Message.error("验证码错误");
                        this.getCaptchaImg();
                        return
                    }
                            this.loading = true;
                            login({
                                username: this.form.username,
@@ -541,14 +408,14 @@
                        if (res.success) {
                            this.socialLogining = true;
                            let accessToken = res.result;
                            this.setStore("accessToken", accessToken);
                            this.setSessionStore("accessToken", accessToken);
                            getOtherSet().then((res) => {
                                if (res.result) {
                                    let domain = res.result.ssoDomain;
                                    Cookies.set("accessToken", accessToken, {
                                        domain: domain,
                                        expires: 7,
                                    });
                                    // Cookies.set("accessToken", accessToken, {
                                    //     domain: domain,
                                    //     expires: 7,
                                    // });
                                }
                            });
                            // 获取用户信息
@@ -625,16 +492,17 @@
                });
            },
            test() {
                this.$Notice.info({
                    title: "测试体验账号",
                    desc: "账号：test或test2<br>密码：123456",
                });
                // this.$Notice.info({
                //     title: "测试体验账号",
                //     desc: "账号：test或test2<br>密码：123456",
                // });
            },
        },
        mounted() {
            this.showNotice();
            //this.showNotice();
            this.relatedLogin();
            this.getCaptchaImg();

        },
    };
</script>