文章主体添加密码授权逻辑

 package.json

@@ -15,6 +15,7 @@
        "babel-plugin-import": "^1.13.3",
        "core-js": "^2.6.5",
        "jquery": "^3.6.0",
        "js-md5": "^0.7.3",
        "jsdom": "^18.1.1",
        "location": "0.0.1",
        "mockjs2": "^1.0.8",

 src/api/blogArticle.js

@@ -20,3 +20,12 @@
        params: parameter
    })
}


export function queryBlogArticleDetail(parameter) {
    return axios({
        url: '/outside/blogArticle/queryBlogArticleDetail',
        method: 'get',
        params: parameter
    })
}

 src/components/mini/box-friend.vue

@@ -191,16 +191,16 @@
    @media screen and (min-width: 1600px) {
        .link-box a {
            margin: 0 0.9375rem 3.75rem;
            width: -webkit-calc(120% / 5 - 1.875rem);
            width: calc(120% / 5 - 1.875rem);
            width: -webkit-calc(100% / 5 - 1.875rem);
            width: calc(100% / 5 - 1.875rem);
        }
    }

    @media screen and (max-width: 1599px) and (min-width: 768px) {
        .link-box a {
            margin: 0 0.9375rem 3.75rem;
            width: -webkit-calc(130% / 4 - 1.875rem);
            width: calc(130% / 4 - 1.875rem);
            width: -webkit-calc(100% / 4 - 1.875rem);
            width: calc(100% / 4 - 1.875rem);
        }
    }


 src/components/mini/box-new-article.vue

@@ -4,14 +4,14 @@
            <div class="recent-post-item">

                <div class="post_cover left_radius" v-if="id%2==0">
                    <router-link to="/mdDetail" :title="title">
                    <router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title">
                        <div class="block left_radius"></div>
                        <img class="post_bg"  :src="coverFileURL" :onerror="img404" :alt="title">
                    </router-link>
                </div>

                <div class="post_cover right_radius" v-else>
                    <router-link to="/mdDetail" :title="title">
                    <router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title">
                        <div class="block right_radius"></div>
                        <img class="post_bg"  :src="coverFileURL" :onerror="img404" :alt="title">
                        <!-- <img class="post_bg" src="https://unpkg.zhimg.com/ahzo@1.0.3/blogpic/1.jpg" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" :alt="title"> -->
@@ -19,7 +19,7 @@
                </div>

                <div class="recent-post-info">
                    <router-link to="/mdDetail" class="article-title"> {{title}} </router-link>
                    <router-link :to="{path:'/mdDetail',query:{id:id}}" class="article-title"> {{title}} </router-link>
                    <!-- <a class="article-title" href="/mdDetail" :title="title"> {{title}}</a> -->
                    <div class="article-meta-wrap" style="display: flex;">
                        <span class="post-meta-date">
@@ -31,7 +31,7 @@
                        <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span>
                        <span class="article-meta">
                            <a-icon type="book" />
                            <router-link to="/mdDetail" class="article-meta__categories"> {{articleTypeName}}
                            <router-link :to="{path:'/mdDetail',query:{id:id}}" class="article-meta__categories"> {{articleTypeName}}
                            </router-link>
                            <!-- <a class="article-meta__categories" href="#"> {{tag}}</a> -->
                        </span>

 src/components/mini/box1-info.vue

@@ -29,10 +29,10 @@
            }
        },
        created() {
            console.log(getAppPage().then((res) => {
                console.log(res);
                return res
            }));
            // console.log(getAppPage().then((res) => {
            //     console.log(res);
            //     return res
            // }));
        }
    }
</script>

 src/components/mini/mdDetail.vue

@@ -7,45 +7,61 @@
        </div>


        <div class="mySecret" v-if="!isHasId">
            <h1>天长地久有时尽,此爱绵绵无绝期..</h1>
            <h3>日志id参数缺失</h3>

        <div class="mySecret" v-if="showMsg && !myLock">
            <h1>怎样才能让你看到我呢</h1>
            <h1>只要你要,只要我有...</h1>
            <span class="myTip">{{errorMsg}}</span>
        </div>

        <div v-else>
            <div class="mySecret" v-if="myLock">

                <h1>越不正经的人越深情..</h1>
				
                <h3>受庇护的文字..输入神秘代码以解除封印</h3>
                <a-auto-complete v-model="secret" ref="mySearch" v-bind="search" @blur="pass">
                    <a-input-password @pressEnter="pass">

                <a-auto-complete v-model="secret" ref="mySearch" v-bind="search" @blur="pressEnter">
                    <a-input-password @pressEnter="pressEnter">
                        <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                    </a-input-password>
                </a-auto-complete>
                <span class="myTip">{{errorMsg}}</span>


            </div>

            <div class="markdown-body article-detail" v-else>
                <vue-markdown :source="source"></vue-markdown>
            </div>
        </div>


    </div>

</template>

<script>
    // import esPath from '../../assets/es.md'
    import VueMarkdown from 'vue-markdown'
    import esPath from '../../assets/es.md'
    import md5 from 'js-md5';

    import {
        queryBlogArticleDetail
    } from '../../api/blogArticle.js'


    import axios from 'axios'

    export default {
        props: ['id'], //接收动态路由的值
        components: {
            VueMarkdown
        },
        data() {
            return {
                isHasId: false,
                source: "",
                acticleId: "",
                showMsg: false,
                myLock: false,
                errorMsg: '',
                secret: '',
                myLock: true,
                search: {
                    placeholder: "",
                    autoFocus: true,
@@ -53,44 +69,79 @@
                    value: '',
                    disabled: false
                },
                // secret: "",
                source: esPath,
            }
        },
        created() {
            var queryId = this.$route.query.id;
            if (queryId == undefined || queryId == null || queryId == "") {
                this.$message.error('日志id缺失..', 2.5)
            } else {
                this.isHasId = true;
            }

            this.acticleId = this.$route.query.id;
        },
        watch: {
            '$route'(to, from) {
                var queryId = this.$route.query.id;
                if (queryId == undefined || queryId == null || queryId == "") {
                    this.$message.error('日志id缺失..', 2.5)
                if ("mdDetail" === to.name) {
                    this.acticleId = this.$route.query.id;
                }

            },
            acticleId: function(newValue, oldValue) {
                if (newValue == undefined || newValue == null || newValue == "") {
                    this.showMsg = true;
                    this.errorMsg = "日志id参数缺失";
                } else {
                    this.queryDetail();
                }
            }

        },
        methods: {
            pass() {
            queryDetail() {
                queryBlogArticleDetail({
                    id: this.acticleId,
                    authWord: this.secret == "" ? null : md5(this.secret)
                }).then((res) => {
                    this.showMsg = true;
                    this.myLock = false;
                    this.errorMsg = res.message;
                    this.source = "";
                    if (res.code != 200) {

                        if (res.code == 1019001) {
                            //日志需要授权
                            this.errorMsg = "";
                            this.myLock = true;
                        } else if (res.code == 1019002) {
                            //授权码错误
                            this.errorMsg = "口令错误..神秘力量依然阻止了你的前进";
                            this.myLock = true;
                        } else {
                            this.$notification.error({
                                message: '好像哪里不对劲..',
                                description: res.message,
                                placement: 'bottomRight'
                            });
                        }

                        return
                    }


                    //获取日志资源文件
                    this.showMsg = false;
                    this.errorMsg = "";
                    this.$axios
                        .get(res.data.articleFileURL)
                        .then((res) => {
                            this.source = res.data;
                        })
                })
            },
            pressEnter() {
                if (this.secret == "") {
                    return
                }
                this.search.disabled = true

                this.source = "";
                this.$message
                    .loading('卍解..', 1.5)
                    .loading('卍解..', 1)
                    .then(() => {
                        // this.myLock = false;
                        // this.$message.success('Loading finished', 2.5)


                        this.$message.warn('错了错了..', 2.5)

                        this.queryDetail();
                        this.search.disabled = false;
                    })

@@ -99,11 +150,7 @@
                this.$router.go(-1);
            }
        },
        mounted() {
            // console.log(this.$route.params)
            // console.log(this.$route.params.id)
            // console.log(this.$route.query.id)
        }
		
    }
</script>


 src/components/mini/tagInfo.vue

@@ -55,6 +55,7 @@
                <br>离开她的怀抱后,我比了比个手势:"其实,六年前,到现在为止"..趁机,我在她耳边,轻轻地道:"***,***"
                <br>
                <br>end..希望我们的故事还没有终点..
				
            </a-timeline-item>

            <a-timeline-item color="">

 src/config/router.config.js

@@ -46,6 +46,7 @@
                        component: tagInfo,
                    },
                    {
                        name:"mdDetail",
                        path: '/mdDetail',
                        component: mdDetail,
                    }, {