Im Folgenden werde ich einen Artikel darüber teilen, wie Vuex die Speicherung des Anmeldestatus implementiert und das Surfen im nicht angemeldeten Status nicht zulässt. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.
Die Grundidee besteht darin, die Vuex-Statusverwaltung zum Speichern des Anmeldestatus zu verwenden (eigentlich zum Speichern eines Werts, z. B. eines Tokens) und dann den Anmeldestatus zu beurteilen, bevor die Route springt Globaler Frontschutz von vue-router beforeEach, Sie können auch den route-exklusiven Schutz beforeEnter verwenden.
Navigationsschutz
Wie der Name schon sagt, wird der von vue-router bereitgestellte Navigationsschutz hauptsächlich zum Schutz der Navigation durch Springen oder Abbrechen verwendet Es gibt mehrere Möglichkeiten, die Routennavigation zu integrieren: global, pro Route oder auf Komponentenebene. Denken Sie daran, dass Änderungen an Parametern oder Abfragen keine Ein-/Ausstiegs-Navigationsschutze auslösen diese Änderungen, oder verwenden Sie den Komponentenschutz von beforeRouteUpdate
Navigationsanalysevorgang abschließen
1 Die Navigation wird ausgelöst 🎜>
2 . Rufen Sie den Leave-Guard in der deaktivierten Komponente auf
5. Rufen Sie beforeRouteEnter in der Routing-Konfiguration auf. 7. Rufen Sie beforeRouteEnter in der aktivierten Komponente auf 9. Die Navigation wird bestätigt.
11. Rufen Sie die Callback-Funktion auf an next im beforeRouteEnter-Guard übergeben
Globaler Guard
Sie können router.beforeEach verwenden, um einen globalen Front-Guard zu registrieren
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})Nach dem Login kopieren
Wenn eine Navigation ausgelöst wird, wird der globale Frontschutz in der Reihenfolge seiner Erstellung aufgerufen und die Navigation wird in allen Wächtern aufgelöst.
Jede Schutzmethode erhält drei Parameter:
nach: Route: das einzugebende Ziel-Routing-Objekt
von: Route: aktuelle Navigation ist dabei, die Route zu verlassen
nächste: Funktion: Diese Methode muss aufgerufen werden Um diesen Hook aufzulösen, hängt der Ausführungseffekt von den Aufrufparametern der nächsten Methode ab:
next(): Führen Sie den nächsten Schritt in der Pipeline aus (bestätigt). next(false): Unterbrechen Sie die aktuelle Navigation, wenn sich die Browser-URL ändert (vielleicht manuell oder durch Drücken der Zurück-Taste), dann wird die URL-Adresse auf die entsprechende Adresse zurückgesetzt zur Von-Route. next('/') oder next({ path: '/' }): Springe zu einer anderen Adresse. Die aktuelle Navigation wird unterbrochen und eine neue Navigation gestartet.
next(error):(2.4.0+) Wenn der an next übergebene Parameter eine Fehlerinstanz ist, wird die Navigation beendet und der Fehler an den von router.onError() registrierten Rückruf übergeben.
Stellen Sie sicher, dass Sie die nächste Methode aufrufen, sonst wird der Hook nicht aufgelöst.
Routenexklusiver Schutz
Sie können den BeforeEnter-Schutz direkt in der Routenkonfiguration definieren:
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})Nach dem Login kopieren
Es gibt weitere Wachen. Weitere Informationen finden Sie im offiziellen Dokument https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
Nach der Installation von vuex
store.js erstellenimport Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {
isLogin: 0
}
const mutations = {
changeLogin(state,status){
state.isLogin = status;
}
}
const actions = {
loginAction({commit}){
commit('changeLogin',1);
}
}
export default new Vuex.Store({
state,
actions,
mutations
})Nach dem Login kopieren
login.vue
import { mapActions,mapState } from 'vuex' einführen und dann Einloggen Für Statusänderungen ist base_url der Pfad
export default {
name: 'Login',
data(){
return{
loginForm: {
username: '',
password: '',
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
],
},
showLogin: false
}
},
mounted(){
this.showLogin = true;
},
computed: {
...mapState(['isLogin'])
},
methods: {
...mapActions(['loginAction']),
submitForm(formName){
this.$refs[formName].validate((valid) => {
if(valid){
if(this.loginForm.username == 'aaa' && this.loginForm.password == '111'){
console.log('验证通过');
this.loginAction();
this.$router.push('manage');
}else{
console.log('账号密码出错');
// this.$message.error('账号密码出错');
this.$message({
type: 'error',
message: '账号密码出错'
});
}
console.log('请求地址: ' + base_url);
}else{
console.log('验证失败');
return false;
}
})
}
}
}Nach dem Login kopieren
Als nächstes verwenden Sie einfach den Route Guard
beforeEach use procedure
router.beforeEach((to,from,next)=>{
if(to.meta.check){
var check = async function(){
const result = await checkUser();
if(result.status == 0){
next();
}else{
alert('用户未登录');
next({path: '/login'});
}
}
check(); //后台验证session
}else{
next();
}
})Nach dem Login kopieren
VorGeben Sie die Verwendungsinstanz ein
export default new Router({
routes: [
{
path: '/login',
component: Login
},
{
path: '/manage',
name: '',
component: Manage,
beforeEnter: (to,from,next)=> { //导航守卫
console.log(to)
console.log(from)
if(store.state.isLogin == 1){
console.log('用户已经登录');
next();
}else{
console.log('用户未登录');
next({path: '/login',query:{ Rurl: to.fullPath}}); //未登录则跳转到登陆界面，query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来
}
}
}
]
})Nach dem Login kopieren
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird. Verwandte Artikel:
Beispiel für die Node.js-Methode zur Implementierung der Registrierungs-E-Mail-Aktivierungsfunktion
Webpack Babel-Loader-Dateipräprozessor Detaillierte Erklärung
JQuery-Implementierung von Beispielen für das Scrollen von Nachrichtensendungen sowie Ein- und Ausblendeffekte
Das obige ist der detaillierte Inhalt vonVerwenden Sie vuex, um den Anmeldestatus zu speichern und das Surfen im Nicht-Anmeldestatus zu deaktivieren. Welche spezifischen Methoden gibt es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
