feat: using vuex to make login status reactively

src/api/track.js

@@ -3,7 +3,8 @@ import request from "@/utils/request";
 import { mapTrackPlayableStatus } from "@/utils/common";
 /**
  * 获取音乐 url
- * 说明 : 使用歌单详情接口后 , 能得到的音乐的 id, 但不能得到的音乐 url, 调用此接口, 传入的音乐 id( 可多个 , 用逗号隔开 ), 可以获取对应的音乐的 url,未登录状态返回试听片段(返回字段包含被截取的正常歌曲的开始时间和结束时间)
+ * 说明 : 使用歌单详情接口后 , 能得到的音乐的 id, 但不能得到的音乐 url, 调用此接口, 传入的音乐 id( 可多个 , 用逗号隔开 ), 可以获取对应的音乐的 url,
+ * !!!未登录状态返回试听片段(返回字段包含被截取的正常歌曲的开始时间和结束时间)
  * @param {string} id - 音乐的 id，例如 id=405998841,33894312
  */
 export function getMP3(id) {

src/components/Player.vue

@@ -36,8 +36,8 @@
             </span>
           </div>
         </div>
-        <!-- 使用 user 的状态来判断图标是否显示 -->
-        <div class="like-button" v-show="settings.user.userId">
+        <!-- 账号登录才会显示 like 图标 -->
+        <div class="like-button" v-show="accountLogin">
           <button-icon
             @click.native="likeCurrentSong"
             :title="$t('player.like')"
@@ -119,7 +119,7 @@
 <script>
 import { updateMediaSessionMetaData } from "@/utils/mediaSession";
 import { mapState, mapMutations, mapActions } from "vuex";
-import { isLoggedIn } from "@/utils/auth";
+import { isLooseLoggedIn } from "@/utils/auth";
 import { userLikedSongsIDs } from "@/api/user";
 import { likeATrack } from "@/api/track";
 import "@/assets/css/slider.css";
@@ -145,14 +145,14 @@ export default {
     setInterval(() => {
       this.progress = ~~this.howler.seek();
     }, 1000);
-    if (this.isLoggedIn) {
+    if (isLooseLoggedIn()) {
       userLikedSongsIDs(this.settings.user.userId).then((data) => {
         this.updateLikedSongs(data.ids);
       });
     }
   },
   computed: {
-    ...mapState(["player", "howler", "settings", "liked"]),
+    ...mapState(["player", "howler", "settings", "liked", "accountLogin"]),
     currentTrack() {
       return this.player.currentTrack;
     },
@@ -174,10 +174,7 @@ export default {
     progressMax() {
       let max = ~~(this.currentTrack.dt / 1000);
       return max > 1 ? max - 1 : max;
-    },
-    isLoggedIn() {
-      return isLoggedIn();
-    },
+    }
   },
   methods: {
     ...mapMutations([

src/components/TrackListItem.vue

@@ -60,7 +60,7 @@
       <div></div>
     </div>
     <div class="actions" v-if="!isTracklist">
-      <button v-if="isLoggedIn" @click="likeThisSong">
+      <button v-if="accountLogin" @click="likeThisSong">
         <svg-icon
           icon-class="heart"
           :style="{
@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import { isLoggedIn } from "@/utils/auth";
+import { mapState } from "vuex";
 
 import ArtistsInLine from "@/components/ArtistsInLine.vue";
 import ExplicitSymbol from "@/components/ExplicitSymbol.vue";
@@ -93,6 +93,7 @@ export default {
     return { focus: false, trackStyle: {} };
   },
   computed: {
+    ...mapState(["accountLogin"]),
     imgUrl() {
       if (this.track.al !== undefined) return this.track.al.picUrl;
       if (this.track.album !== undefined) return this.track.album.picUrl;
@@ -126,10 +127,7 @@ export default {
       if (!this.track.playable) trackClass.push("disable");
       if (this.isPlaying) trackClass.push("playing");
       return trackClass;
-    },
-    isLoggedIn() {
-      return isLoggedIn();
-    },
+    }
   },
   methods: {
     goToAlbum() {

src/router/index.js

@@ -3,7 +3,7 @@ import VueRouter from "vue-router";
 import store from "@/store";
 import NProgress from "nprogress";
 import "@/assets/css/nprogress.css";
-import Cookies from "js-cookie";
+import { isLooseLoggedIn } from "@/utils/auth";
 
 NProgress.configure({ showSpinner: false, trickleSpeed: 100 });
 
@@ -116,17 +116,15 @@ const router = new VueRouter({
 });
 
 router.beforeEach((to, from, next) => {
+  // 需要登录的逻辑
   if (to.meta.requireLogin) {
     if (store.state.settings.user.nickname === undefined) {
       next({ path: "/login" });
     }
-    if (
-      Cookies.get("MUSIC_U") === undefined &&
-      Cookies.get("loginMode") === "account"
-    ) {
-      next({ path: "/login" });
-    } else {
+    if (isLooseLoggedIn()) {
       next();
+    } else {
+      next({ path: "/login" });
     }
   } else {
     next();

src/store/actions.js

@@ -1,6 +1,6 @@
 import { updateMediaSessionMetaData } from "@/utils/mediaSession";
 import { getTrackDetail, scrobble, getMP3 } from "@/api/track";
-import { isLoggedIn } from "@/utils/auth";
+import { isAccountLoggedIn } from "@/utils/auth";
 import { updateHttps } from "@/utils/common";
 
 export default {
@@ -41,8 +41,7 @@ export default {
           dispatch("nextTrack");
         });
       }
-
-      if (isLoggedIn) {
+      if (isAccountLoggedIn()) {
         getMP3(track.id).then((data) => {
           // 未知情况下会没有返回数据导致报错，增加防范逻辑
           if (data.data[0]) {

src/store/mutations.js

@@ -81,6 +81,16 @@ export default {
       return track;
     });
   },
+  updateAccountLogin(state, status) {
+    state.accountLogin = status;
+  },
+  updateUsernameLogin(state, status) {
+    state.usernameLogin = status;
+  },
+  updateLogout() {
+    this.commit("updateAccountLogin", false);
+    this.commit("updateUsernameLogin", false);
+  },
   updateUser(state, user) {
     state.settings.user = user;
   },

src/store/state.js

@@ -9,4 +9,6 @@ export default {
   },
   player: JSON.parse(localStorage.getItem("player")),
   settings: JSON.parse(localStorage.getItem("settings")),
+  accountLogin: false,
+  usernameLogin: false,
 };

src/utils/auth.js

@@ -10,8 +10,36 @@ export function doLogout() {
   // Cookies.remove("MUSIC_U");
   // 更新状态仓库中的用户信息
   store.commit("updateUser", { id: 0 });
+  // 更新状态仓库中的登录状态
+  store.commit("updateLogout");
 }
 
+// MUSIC_U 只有在账户登录的情况下才有
 export function isLoggedIn() {
   return Cookies.get("MUSIC_U") !== undefined ? true : false;
 }
+
+// 账号登录
+export function isAccountLoggedIn() {
+  return (
+    Cookies.get("MUSIC_U") !== undefined &&
+    Cookies.get("loginMode") === "account"
+  );
+}
+
+// 用户名搜索（用户数据为只读）
+export function isUsernameLoggedIn() {
+  return (
+    Cookies.get("MUSIC_U") === undefined &&
+    Cookies.get("loginMode") === "username"
+  );
+}
+
+// 账户登录或者用户名搜索都判断为登录，宽松检查
+export function isLooseLoggedIn() {
+  console.log(
+    "isAccountLoggedIn() || isUsernameLoggedIn()",
+    isAccountLoggedIn(), "||", isUsernameLoggedIn()
+  );
+  return isAccountLoggedIn() || isUsernameLoggedIn();
+}

src/utils/common.js

@@ -1,4 +1,4 @@
-import { isLoggedIn } from "./auth";
+import { isAccountLoggedIn } from "./auth";
 import store from "@/store";
 
 export function isTrackPlayable(track) {
@@ -7,7 +7,7 @@ export function isTrackPlayable(track) {
     reason: "",
   };
   if (track.fee === 1 || track.privilege?.fee === 1) {
-    if (isLoggedIn && store.state.settings.user.vipType === 11) {
+    if (isAccountLoggedIn() && store.state.settings.user.vipType === 11) {
       result.playable = true;
     } else {
       result.playable = false;

src/views/album.vue

@@ -60,8 +60,8 @@
         More by
         <router-link :to="`/artist/${album.artist.id}`"
           >{{ album.artist.name }}
-        </router-link></div
-      >
+        </router-link>
+      </div>
       <div>
         <CoverRow
           type="album"

src/views/loginAccount.vue

@@ -112,9 +112,9 @@ export default {
     NProgress.done();
   },
   methods: {
-    ...mapMutations(["updateUser", "updateUserInfo"]),
+    ...mapMutations(["updateUser", "updateUserInfo", "updateAccountLogin"]),
     afterLogin() {
-      // Cookies.set("MUSIC_U", true, { expires: 3650 });
+      this.updateAccountLogin(true);
       Cookies.set("loginMode", "account", { expires: 3650 });
       userPlaylist({
         uid: this.$store.state.settings.user.userId,
@@ -127,18 +127,34 @@ export default {
         this.$router.push({ path: "/library" });
       });
     },
+    validatePhone() {
+      if (
+        this.countryCode === "" ||
+        this.phone === "" ||
+        this.password === ""
+      ) {
+        alert("国家区号、手机或密码不正确");
+        this.processing = false;
+        return false;
+      }
+      return true;
+    },
+    validateEmail() {
+      const emailReg = /^[A-Za-z0-9]+([_][A-Za-z0-9]+)*@([A-Za-z0-9]+\.)+[A-Za-z]{2,6}$/;
+      if (
+        this.email === "" ||
+        this.password === "" ||
+        !emailReg.test(this.email)
+      ) {
+        alert("邮箱或密码不正确");
+        return false;
+      }
+      return true;
+    },
     login() {
       this.processing = true;
       if (this.mode === "phone") {
-        if (
-          this.countryCode === "" ||
-          this.phone === "" ||
-          this.password === ""
-        ) {
-          alert("国家区号、手机或密码不正确");
-          this.processing = false;
-          return;
-        }
+        this.processing = this.validatePhone();
         loginWithPhone({
           countrycode: this.countryCode.replace("+", "").replace(/\s/g, ""),
           phone: this.phoneNumber.replace(/\s/g, ""),
@@ -156,16 +172,7 @@ export default {
             alert(error);
           });
       } else {
-        let emailReg = /^[A-Za-z0-9]+([_][A-Za-z0-9]+)*@([A-Za-z0-9]+\.)+[A-Za-z]{2,6}$/;
-        if (
-          this.email === "" ||
-          this.password === "" ||
-          !emailReg.test(this.email)
-        ) {
-          alert("邮箱或密码不正确");
-          this.processing = false;
-          return;
-        }
+        this.processing = this.validateEmail();
         loginWithEmail({
           email: this.email.replace(/\s/g, ""),
           password: "fakePassword",

src/views/loginUsername.vue

@@ -41,8 +41,9 @@
       <ButtonTwoTone
         @click.native="confirm"
         v-show="activeUser.nickname !== undefined"
-        >{{ $t("login.confirm") }}</ButtonTwoTone
       >
+        {{ $t("login.confirm") }}
+      </ButtonTwoTone>
     </div>
   </div>
 </template>
@@ -73,7 +74,7 @@ export default {
     NProgress.done();
   },
   methods: {
-    ...mapMutations(["updateUser", "updateUserInfo"]),
+    ...mapMutations(["updateUser", "updateUserInfo", "updateUsernameLogin"]),
     search() {
       if (!this.keyword) return;
       search({ keywords: this.keyword, limit: 9, type: 1002 }).then((data) => {
@@ -83,6 +84,7 @@ export default {
     },
     confirm() {
       this.updateUser(this.activeUser);
+      this.updateUsernameLogin(true);
       Cookies.set("loginMode", "username", { expires: 3650 });
       userPlaylist({
         uid: this.activeUser.userId,

src/views/playlist.vue

@@ -46,7 +46,8 @@
           </ButtonTwoTone>
           <ButtonTwoTone
             v-if="
-              isLoggedIn && playlist.creator.userId !== settings.user.userId
+              accountLogin &&
+              playlist.creator.userId !== settings.user.userId
             "
             shape="round"
             :iconClass="playlist.subscribed ? 'heart-solid' : 'heart'"
@@ -92,7 +93,6 @@ import NProgress from "nprogress";
 import { getPlaylistDetail, subscribePlaylist } from "@/api/playlist";
 import { playAList } from "@/utils/play";
 import { getTrackDetail } from "@/api/track";
-import { isLoggedIn } from "@/utils/auth";
 
 import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
 import TrackList from "@/components/TrackList.vue";
@@ -132,10 +132,7 @@ export default {
     window.removeEventListener("scroll", this.handleScroll, true);
   },
   computed: {
-    ...mapState(["player", "settings"]),
-    isLoggedIn() {
-      return isLoggedIn();
-    },
+    ...mapState(["player", "settings", "accountLogin"]),
     isLikeSongsPage() {
       return this.$route.name === "likedSongs";
     },