现在有一个需求,需要用户进行某些操作的时候检测有没有登陆,没有登陆就进行登陆控制。
点评:
- 优势:这种控制不需要前端的其他成员增加代码量;
- 劣势:严重依赖后端的控制,控制不够全面。
点评:
- 优势:团队成员只需要在模版代码加入一个指令既可以实现控制;
- 劣势:登陆权限控制不够灵活
综合评价:实际项目中应该综合应用方案1和方案2,综合前端后端进行保障。
Vue.directive('auth', {
bind: function (el, binding) {
// 判断是否登陆,没有就跳转到登陆页
// 判断方法可以判断vuex中有无用户信息,或者本地有没有存储token...
}
});
- 选择1:跳转到一个新的登陆页,页面含有
<button open-type="getUserInfo">
; - 选择2:直接打开一个模拟的弹窗
<dialog>
,弹窗上面有按钮<button open-type="getUserInfo">
。
点评:
-
优势:直接复用了web环境下的方案,统一两端的逻辑,只需加个环境变量即可实现逻辑的复用。
-
劣势:必须进入到一个中转页,体验差。
点评:
- 优势:便于团队成员接入登录逻辑,只需引入组件,包裹标签即可;
- 劣势:登陆权限控制不够灵活
// register组件源码
<template>
<div @click="click">
<slot></slot>
<button v-if="isShowAuth" open-type="getUserInfo" @getuserinfo="onGotUserInfo" @click.stop></button>
</div>
</template>
<script>
export default {
computed: {
isShowAuth () {
return this.$store.state.isShowAuth
}
},
methods: {
onGotUserInfo (e) {
if (e.mp.detail.errMsg === 'getUserInfo:ok') {
this.$store.state.isShowAuth = false
this.$emit('click')
}
},
click () {
this.$emit('click')
}
}
}
</script>
// 引入组件
<template>
<register @click="like">
<div>点赞</div>
</register>
<template>
import Register from './rigister.vue'
<script>
export default {
components: { Register },
methods: {
like () {
console.log('就很棒')
}
}
}
</script>
https://github.com/xyzard/rigister-mpvue.git
业务设计-小程序登陆流程