作業依頼アプリを作ってみよう【その1：画面の説明と認証まで】

const applicationKey = 'YOUR_APPLICATION_KEY';
const clientKey = 'YOUR_CLIENT_KEY';
const ncmb = new NCMB(applicationKey, clientKey);

const routes = [
  {
    // 一番最初に読み込まれるHTML
    path: '/',
    url: './index.html',
  },
  {
    // 依頼一覧画面
    name: 'Home',
    path: '/home/',
    componentUrl: './pages/home.html',
  },  
  {
    // 依頼作成画面
    name: 'New',
    path: '/new/',
    componentUrl: './pages/new.html',
  },
  {
    // 依頼編集画面
    name: 'Edit',
    path: '/edit/',
    componentUrl: './pages/edit.html',
  },
  {
    // ログイン画面
    name: 'Login',
    path: '/login/',
    componentUrl: './pages/login.html',
  },
  // Default route (404 page). MUST BE THE LAST
  {
    path: '(.*)',
    url: './pages/404.html',
  },
];

<div id="app">
  <div class="views safe-areas">
    <div id="view-home" class="view view-main view-init" data-name="home" data-url="/home/">
    </div>
  </div>
</div>

$on('pageBeforeIn', async (e, page) => {
  if (!(await auth())) {
    return $f7router.navigate({name: 'Login'});
  }
  // 以下省略
});

// 認証状態を確認する処理
const auth = async () => {
  // 現在のログインユーザ
  const user = ncmb.User.getCurrentUser();
  // ログインしていなければfalseを返して終わり
  if (!user) return false;
  try {
    // セッションの有効性チェック
    await ncmb.DataStore('Test').fetch();
    // 有効なら true を返して終わり
    return true;
  } catch (e) {
  }
  // セッションが無効ならlocalStorageのデータを削除
  localStorage.removeItem(NCMB/${ncmb.apikey}/currentUser);
  // セッションも消す
  ncmb.sessionToken = null;
  return false;
}

// ログインまたは新規登録処理
const signInOrLogin = async function() {
  // フォームのシリアライズ（app.jsにて定義）
  const params = serializeForm(this.$el.find('form#login')[0]);
  try {
    // ユーザ登録処理
    await registerUser(params);
  } catch (e) {
    // ユーザ登録が失敗するのはユーザ名が重複している場合
    // この場合はエラーを無視
  }
  try {
    // ログイン処理
    const user = await ncmb.User.login(params.userName, params.password);
    // アクセス権限（ACL）を設定
    await setAcl(user);
    // 前の画面に戻る
    $f7router.back();
  } catch (e) {
    // ログインが失敗するのはID、パスワードが不一致の場合
    app.dialog.alert(ログイン失敗しました);
  }
}

// ユーザ登録処理
const registerUser = (params) => {
  const user = new ncmb.User;
  return user
    .set('userName', params.userName)
    .set('password', params.password)
    .set('displayName', params.displayName)
    .signUpByAccount();
}

// ACLを設定する処理
const setAcl = (user) => {
  const acl = new ncmb.Acl;
  acl
    // 自分自身は読み書き可能
    .setUserReadAccess(user, true)
    .setUserWriteAccess(user, true)
    // 管理者グループも読み込み可能
    .setRoleReadAccess('admin', true);
  // ACLを設定して更新
  return user
    .set('acl', acl)
    .update();
}