小程序 앱만들기 - 5 : 로그인/아웃 및 <navigator> 컴포넌트 사용

유튜브강좌 : youtu.be/tNzxbFqEoZE

 

 

로그인/아웃 처리하기 

원래 로그인/아웃을 처리하기 위해서 wx.login() API를 이용해서 openid 및 session_key를 포함하여 사용자의 자격 증명을 획득한후 로그인 상태 정보를 앱의 서버에 전달해서 로그인/아웃 처리를 해야 한다.

하지만 서버가 없는 상황이니......

<button> 컴포넌트의 open-type="getUserInfo"를 이용하여 간단하게 로그인/아웃을 처리하자.

<button wx:if="{{!hasLogin}}" open-type="getUserInfo" bindgetuserinfo="logIn" class="cu-btn bg-white text-xxl">{{userInfo.nickName}}</button>

버튼을 클릭하면 open-type="getUserInfo"로 인해 logIn(e)로 유저정보가전달된다.

유저정보를 전달받으면

로그인 처리 wx.setStorageSync()를 이용해 유저정보를 스토레이지에 저장한다.

반대로

로그아웃시 wx.removeStorageSync()를 이용해 유저정보를 스토레이지에서 삭제한다.

Page({
  data: {
    hasLogin: false,
    userInfo: {},
  },

  onLoad () {
    this.setData4Login(wx.getStorageSync('userInfo'));
  },

  setData4Login(userInfo="") {
    var data = {
      hasLogin: false,
      userInfo: { avatarUrl: 'http://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png', nickName: '로그인이 필요합니다.' }
    };
    if( userInfo ) {
      data.hasLogin = true;
      data.userInfo = userInfo;
      wx.setStorageSync('userInfo', userInfo);
    } else {
      data.hasLogin = false;
      data.userInfo = data.userInfo;
      wx.removeStorageSync('userInfo');
    }
    this.setData(data);
  },

  logIn(e) {
    if (e.detail.userInfo == undefined) {
      util.showToast('유저정보 실패!',"ERROR");
      return;
    }
    this.setData4Login(e.detail.userInfo);
    util.showToast("로그인 성공!")    
  },

  logOut(e) {
    let that = this;
    wx.showModal({
      title: 'LogOut',
      confirmColor: '#b4282d',
      content: '로그아웃 하시겠습니까？',
      cancelText: "취소",
      confirmText: "확인",
      success: function (res) {
        if (res.confirm) {
          that.setData4Login("");
        }
      }
    })
  }

 

<navigator> 컴포넌트

기본 기능은 아래의 Basic API기능에서 이미 배웠다.

- Routing

미니프로그램의 페이지 이동시 사용.

wx.reLaunch() : 모든 페이지를 닫고 지정된 페이지를 엽니다.

wx.reDirectTo() : 현재 페이지를 닫고 지정된 페이지를 엽니다.

wx.navigateTo() : 현재 페이지를 열어두고 지정된 페이지를 엽니다.

wx.navigateBack() : 현재 페이지를 닫고 이전 페이지 또는 다단계 페이지로 돌아갑니다.

 

위 API를 Component에서 처리하는 방법이다.

<navigator>컴포넌트의 요소

- open-type : 생략되면 기본값인 "navigate"설정된다.

즉, 아래 코드와 같은 방식으로 페이지를 열개된다.

wx.redirectTo({

  url: 지정한 url,

})

- hover-class : 클릭 할 때 스타일 시트에 효과를 지정. "none'은 효과없음 정의. 

<navigator class="content" url="/pages/user/bookmark/bookmark" hover-class="none">

<navigator class="content" url="/pages/user/code/code" hover-class="none">

<navigator class="content" url="/pages/user/about/about" hover-class="none">

 

각 페이지 만들기

- 즐겨찾기

개인 사용자가 보관한 관광정보를 관리해 주는 페이지.

추후 검색페이지 즐겨찾기 기능 추가후.....

<!--pages/user/bookmark/bookmark.wxml-->
<cu-custom bgImage="http://tong.visitkorea.or.kr/cms/resource/72/1536672_image2_1.jpg" isBack="{{true}}">
  <view slot="backText">뒤로</view>
  <view slot="content">즐겨찾기</view>
</cu-custom>

 

- 앱 소개

앱 소개.....

<!--pages/user/about/about.wxml-->
<cu-custom bgImage="http://tong.visitkorea.or.kr/cms/resource/72/1536672_image2_1.jpg" isBack="{{true}}">
  <view slot="backText">뒤로</view>
  <view slot="content">소개</view>
</cu-custom>

<view class='margin-xl bg-white padding-xl radius shadow-lg'>
  <view class='text-center margin-bottom text-lg  text-grey'>관광정보 앱</view>
  <view class='text-content'>
    <view>Ver : 1.0</view>
    <view>UI 라이브러리 : ColorUI Ver 2.0</view>
    <view>UI 다운로드 : github.com/weilanwl/ColorUI </view>
    <view class='margin-top-sm'>""</view>
    <view class='margin-top-sm'>""</view>
    <view class='margin-top-sm'>""</view>
    <view class='margin-top-sm'>""</view>
    <view class='margin-top-sm'>""</view>
    <view class='margin-top-sm'>""</view>
    <view class='margin-top-sm'>""</view>                    
    <view class='margin-top-sm'>""</view>        
    <view class='margin-top-sm'>""</view>        
    <view class='margin-top-sm'>""</view>        
    <view class='margin-top-sm'>""</view>        
    <view class='margin-top-sm'>""</view>            
    <view class='margin-top-sm'>감사합니다.</view>
  </view>
</view>

 

- 코드관리

다음 시간에....  

<!--pages/user/code/code.wxml-->
<cu-custom bgImage="http://tong.visitkorea.or.kr/cms/resource/72/1536672_image2_1.jpg" isBack="{{true}}">
  <view slot="backText">뒤로</view>
  <view slot="content">코드관리</view>
</cu-custom>