31.阳光沙滩-vue移动端-未登录限制、插件的使用

未登录限制、插件的使用

体验地址：http://sob.webapp.52android.cn:8001（域名来自a lonely cat）

1.前情提要

上一节我们把点赞功能，收藏功能都已经完成了。但是，当时我们编写功能时认为，点赞的人一定已经登录了。实际上并不一定。未登录也是允许查看文章详情的。

未登录的用户，没有token，点赞必定会失败的，也会导致后续的程序逻辑出错。所以我们需要在他执行操作执行，进行一次判断，如果未登录，就提示跳转到登录页面，登录完成后再跳转回原页面（这个功能之前已经做过了，我们只需跳转到登录页面即可）。

设想下，随着功能越来越多，后续的功能多半都是需要进行登录判断的，那么这个登录方法写在哪里，就有讲究。

如果你单独写在某个页面，那么其他页面要想使用，就必须再写一次，不合适。所以这个方法我们需要写成全局的。那么我们就打算把方法挂载到Vue对象的prototype上，这样所有的vc组件都能通过原型来找到这个方法，就实现了任意vc对象均可调用的目标。

2.基于插件来挂载

其实不用插件也可以直接挂载，只是这里穿插一下插件的用法。

首先在src下创建plugins目录，专门存放插件。然后创建一个js文件，里面必须有一个install(Vue){} 方法，我们的代码都将编写到该方法中。

/**
 * 这是一个插件
 * 是为了提供一些全局方法而定义的
 */
export default {
    //这个install方法会被调用，并且传入 Vue构造函数
    install(Vue) {

        //往原型上定义方法
        Vue.prototype.isLogin = function () {
                    let userInfo = this.$store.state.userInfo
                    if (!userInfo){
                        //不存在，说明没有登录，展示提示，然后跳转到登录页面
                        this.$notify.warn("未登录，即将跳转到登录页面...")
                        setTimeout(()=>{
                            this.$router.push("/login")
                        },1000)
        
                        return false
                    }
                    return true
        
        }
    }
}

核心就是挂载到prototype上的isLogin方法。通过vuex中的userInfo来判断是否已经登录，如果没有登录，那就给出提示，并跳转到登录页面，同时返回false方便页面上进行判断。

写好之后，回到main.js，对插件进行注册

//导入自定义插件
import moreFunction from "./plugins/moreFunction";
//应用插件，注意必须在vm对象创建之前应用
Vue.use(moreFunction)

new Vue({
    render: h => h(App),
    router,
    store
}).$mount('#app') //这里挂载的是 public/index.html 的id为app的 div

3.使用

回到文章详情页面，在弹出收藏夹之前以及点赞之前，先进行一次判断：

//先判断是否登录
if (!this.isLogin()){
    return
}

只要没登录，就不执行后面的逻辑。等会就回跳转到登录页面进行登录。

4.效果

5.源码

参考https://github.com/cctyl/sunofbeach_mobile