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