So implementieren Sie Berechtigungsverwaltung und Benutzeridentitätsauthentifizierung in Uniapp

So implementieren Sie Berechtigungsverwaltung und Benutzeridentitätsauthentifizierung in uniapp

Mit der rasanten Entwicklung des mobilen Internets erfordern immer mehr Anwendungen Benutzeridentitätsauthentifizierung und Berechtigungsverwaltung. Die Implementierung dieser Funktionen in uniapp ist nicht kompliziert. In diesem Artikel werden die spezifischen Implementierungsmethoden vorgestellt und Codebeispiele bereitgestellt.

1. Benutzeridentitätsauthentifizierung

Benutzeridentitätsauthentifizierung bedeutet, dass die Anwendung die Legitimität der Benutzeridentität überprüft, wenn sich der Benutzer anmeldet, um sicherzustellen, dass der Benutzer die Anwendung sicher und normal verwenden kann.

1. Authentifizierungsseite erstellen

Zuerst müssen wir eine Anmeldeseite erstellen, auf der Benutzer ihren Benutzernamen und ihr Passwort eingeben können. Das Springen zwischen Seiten kann über die Seitensprungfunktion von uniapp erreicht werden.

2. Benutzeridentität überprüfen

Nachdem der Benutzer auf der Anmeldeseite den Benutzernamen und das Passwort eingegeben hat, können der Benutzername und das Passwort zur Überprüfung über die Netzwerkanforderungsfunktion von uniapp an den Backend-Server gesendet werden. Der Backend-Server kann verschiedene Authentifizierungsmethoden verwenden, z. B. tokenbasierte Authentifizierung, Cookie-basierte Authentifizierung usw. In diesem Beispiel verwenden wir zur Veranschaulichung eine tokenbasierte Authentifizierungsmethode.

Nachdem überprüft wurde, ob der Benutzername und das Passwort des Benutzers korrekt sind, generiert der Backend-Server ein Token und gibt das Token an den Client zurück. Nach Erhalt des Tokens kann der Client das Token zur späteren Berechtigungsüberprüfung lokal speichern.

3. Token zur Berechtigungsüberprüfung verwenden

Wenn der Benutzer andere Vorgänge ausführt, z. B. auf eine eingeschränkte Seite zugreift oder einen eingeschränkten Vorgang ausführt, kann der Interceptor-Mechanismus von uniapp verwendet werden, um zu überprüfen, ob das Token lokal vorhanden ist. Wenn ein Token vorhanden ist, kann das Token über den Anforderungsheader zur Berechtigungsüberprüfung an den Backend-Server gesendet werden. Der Backend-Server bestimmt anhand der Gültigkeit des Tokens, ob der Benutzer die Berechtigung hat, den Vorgang auszuführen.

2. Berechtigungsverwaltung

Berechtigungsverwaltung bezieht sich auf die Beschränkung des Zugriffs und der Vorgänge von Benutzern auf bestimmte Funktionen und Ressourcen basierend auf der Identität und Rolle des Benutzers. Administratoren können beispielsweise Benutzer verwalten, Artikel bearbeiten und andere Funktionen ausführen, während normale Benutzer nur Artikel durchsuchen usw. können.

1. Rollen und Berechtigungen definieren

Zuerst müssen wir die Beziehung zwischen Rollen und Berechtigungen definieren. Sie können eine Datenbank oder Konfigurationsdatei verwenden, um die Korrespondenz zwischen Rollen und Berechtigungen zu speichern. In uniapp können wir das Front-End-Framework vuex verwenden, um Benutzerrollen- und Berechtigungsinformationen zu speichern und zu verwalten.

2. Routing Guards festlegen

In Uniapp kann die Berechtigungsverwaltung durch Routing Guards erreicht werden. Der Route Guard überprüft, bevor die Route des Benutzers springt, um festzustellen, ob der Benutzer über die Berechtigung zum Zugriff auf die Seite verfügt.

In der Routing-Konfiguration können Sie das Metafeld der Route so festlegen, dass die für die Route erforderlichen Berechtigungsinformationen gespeichert werden. Bevor die Route springt, können Sie die Berechtigungsinformationen des Benutzers über vuex abrufen und dann anhand des Metafelds der Route bestimmen, ob der Benutzer über die Berechtigung zum Zugriff auf die Seite verfügt. Wenn Sie keine Berechtigung haben, können Sie zu anderen Seiten springen oder Eingabeaufforderungen geben.

Codebeispiel:

1. Codebeispiel zur Implementierung der Benutzerauthentifizierung:

// Anmeldeseite

< ; script>
export default {
data() {

return {
  username: '',
  password: ''
}

},
Methoden: {

login() {
  uni.request({
    url: 'http://example.com/login',
    method: 'POST',
    data: {
      username: this.username,
      password: this.password
    },
    success(res) {
      // 登录成功，保存token
      uni.setStorageSync('token', res.data.token)
    }
  })
}

}
}

2. Codebeispiel zur Implementierung der Berechtigungsverwaltung:

// Routing-Konfiguration
const Routen = [{

path: '/admin',
component: Admin,
meta: {
  requireAuth: true, // 需要登录才能访问
  roles: ['admin'] // 需要admin角色才能访问
}

},
{

path: '/user',
component: User,
meta: {
  requireAuth: true // 需要登录才能访问
}

}
]

// Route Guard
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) {

// 需要登录才能访问
const token = uni.getStorageSync('token')
if (token) {
  // 有token，继续跳转
  const roles = store.state.roles
  if (to.meta.roles && to.meta.roles.length > 0 && roles.length > 0) {
    // 需要权限验证
    if (roles.some(role => to.meta.roles.includes(role))) {
      // 有权限，继续跳转
      next()
    } else {
      // 没有权限，跳转到其他页面
      next('/403')
    }
  } else {
    // 不需要权限验证
    next()
  }
} else {
  // 没有token，跳转到登录页面
  next('/login')
}

} else {

// 不需要登录，继续跳转
next()

}
})

Durch die obigen Codebeispiele können wir die Funktionen der Berechtigungsverwaltung und Benutzeridentitätsauthentifizierung in Uniapp implementieren. Entwickler können entsprechend ihren tatsächlichen Bedürfnissen entsprechende Änderungen und Erweiterungen vornehmen.