Vuex를 사용하지 않고 로그인 상태 판단을 캡슐화하는 방법에 대해 이야기해 보겠습니다.

이 글에서는 Vuex 상태 관리를 사용하지 않고 간단한 캡슐화를 사용하여 로그인 상태를 확인하는 방법을 보여드리겠습니다.

프로젝트에서는 반드시 사용자 로그인 상태에 대한 판단이 있을 것이므로 전체 프로젝트의 적용을 충족하려면 로그인 상태에 대한 판단을 캡슐화해야 합니다. 물론 캡슐화를 사용하지 않으면, 높은 결합도, 코드 중복성 등이 발생합니다. 결과적으로 프로젝트에서 로그인 상태를 저장하기 위해 vuex 상태 관리를 사용하는 경우가 많습니다. 프로젝트가 상태 관리를 사용하지 않는 경우 간단한 캡슐화를 사용하여 로그인 상태를 확인할 수 있습니다. [관련 권장 사항: vue.js 비디오 튜토리얼]

로그인 상태 캡슐화

로그인 상태를 정상적으로 캡슐화하려면 저장된 토큰을 얻기 위해 getToken이라는 두 가지 함수가 필요합니다. 토큰을 사용하여 isLogin에 로그인할지 여부를 결정하려면 src 디렉터리에 새 폴더를 만들거나 파일 디렉터리에 새 auth.js를 만들어야 합니다. 여기서 요청을 캡슐화합니다. getToken和使用token判断是否登录的isLogin,我们需要在src目录下新建一个文件夹，又或者在我们封装请求的文件目录下新建一个auth.js即可。

getToken

获取token的话只需要通过使用localStorage取得token并返回给函数值

export function getToken() {
  return localStorage.getItem("token");
}

isLogin

判断登录的话仅仅需要通过调用getToken获得token的值来返回布尔值从而判断用户是否登录

export function isLogin() {
  if (getToken()) {
    return true;
  }
  return false;
}

除此之外，项目中还会有别的地方要使用到getToken，比如说在请求头中需要转入token的值等

使用方法

我们在要使用的页面中直接按需引入即可，比如说这里我们只引进isLogin

import { isLogin } from "@/request/auth";

在引入之后，有人就问了，我们判断用if else吗，nonono，低了，隐藏分低了，来看我下面的操作

mounted() {
    // 登录判断，项目成功运行后启动
    isLogin()
      ? console.log("isLogin")
      : (console.log("Need to login"),
        this.$message.error('未登录'),
        this.$router.push("/login")
      );
  },

注意到这里，我们的登录状态判断的触发位置需要注意一下，一般是在mounted的时候，即一般是在初始化页面完成后的钩子中进行登录状态的判断，这里一般也是页面获取信息的请求函数的位置。

除此之外，我这里的写法是?:，来进行函数触发判断的，正常来讲可能很多人会使用if

getToken

토큰을 얻으려면 localStorage를 사용하여 토큰을 얻고 이를 함수 값으로 반환하기만 하면 됩니다

export function setToken(token) {
  return localStorage.setItem("token", token);
}

isLogin

로그인을 확인하려면 getToken을 호출하여 사용자가 로그인되었는지 확인하는 부울 값을 반환함으로써 토큰 값만 가져오면 됩니다. inrrreee

또한 GetToken을 다른 곳에서 사용해야 합니다. 예를 들어 토큰 값을 요청 헤더로 전송해야 하는 등입니다.🎜

🎜사용방법🎜🎜🎜사용하고 싶은 페이지에 바로 사용하면 됩니다. 예를 들어 여기서는 isLogin만 소개합니다. if else를 사용합니까? nonono, low, hide 점수가 낮습니다. 다음 작업을 살펴보겠습니다 🎜rrreee🎜 여기에서 로그인 상태 판단의 트리거 위치에 주의해야 합니다. 일반적으로 마운트될 때, 즉 일반적으로 초기화 페이지에서 완료됩니다. 로그인 상태는 일반적으로 페이지에서 정보를 얻기 위한 요청 기능이 있는 후속 후크에서 판단됩니다. 위치하고 있습니다. 🎜🎜그리고 함수 트리거 판단을 위해 여기서 쓰는 방식은 ?:입니다. 일반적으로 많은 사람들이 if를 사용하지만 여기서는 프롬프트 구성 요소를 사용합니다. 요소이며 자체 구성 요소 라이브러리의 프롬프트에 따라 다르게 변경할 수 있습니다. 🎜🎜🎜setToken🎜🎜🎜getToken이 캡슐화되었으므로 편의를 위해 setToken을 다시 캡슐화해야 합니다🎜rrreee🎜 (동영상 공유 학습: 🎜웹 프론트엔드 튜토리얼🎜)🎜

위 내용은 Vuex를 사용하지 않고 로그인 상태 판단을 캡슐화하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!