Heim > Web-Frontend > js-Tutorial > Hauptteil

So erstellen Sie eine Anmeldekontrollfunktion in vue.js

php中世界最好的语言
Freigeben: 2018-04-27 10:47:59
Original
1631 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie die Anmeldekontrollfunktion in vue.js einrichten . Die Verwendung von Vue-Router zur Steuerung der Anmeldung in Vue ist in Hintergrundverwaltungssystemen weit verbreitet, ähnelt jedoch nicht dem bekannten Prozess zuvor. Solange jedoch jeder die Verwendung von Vue-Router versteht, ist es einfach umzusetzen.

Zuerst müssen wir die Anmeldeseite und die Hauptseite schreiben:

<template>
 <p class="login">
  <table width="100%" height="100%">
   <tr height="41"><td class="logintb" colspan="2"> </td></tr>
   <tr height="100%" class="loginbg">
    <td id="left_cont">
     <table width="100%" height="100%">
      <tr height="155"><td colspan="2"> </td></tr>
      <tr>
       <td width="20%" rowspan="2"> </td>
       <td width="60%">
        <table width="100%">
          <tr height="70"><td align="right"></td></tr>
          <tr height="274">
            <td valign="top" align="right">
              <img src="../../static/images/logo.png"/>
             </img/>
            </td>
          </tr>
        </table>
       </td>
       <td width="15%" rowspan="2"> </td>
      </tr>
      <tr><td colspan="2"> </td></tr>
     </table>
    </td>
    <td id="right_cont">
     <table height="100%">
      <tr height="30%"><td colspan="3"> </td></tr>
      <tr>
       <td width="30%" rowspan="5"> </td>
       <td valign="top" id="form">
          <table valign="top" width="50%">
            <tr><td colspan="2"><h4 style="letter-spacing:1px;font-size:16px;">管理后台</h4></td></tr>
            <tr><td>管理员:</td><td><input type="text" v-model.trim="username" value="" /></td></tr>
            <tr><td>密  码:</td><td><input type="password" v-model.trim="pwd" value="" /></td></tr>
            <!-- <tr><td>验证码:</td><td><input type="text" name="" value="" style="width:80px;"/></td></tr> -->
            <tr class="bt" align="center"><td> <input type="submit" @click="login" value="登陆" /></td><td> </td></tr>
          </table>
       </td>
       <td rowspan="5"> </td>
      </tr>
      <tr><td colspan="3"> </td></tr>
     </table>
    </td>
   </tr>
   <tr id="login_bot"><td colspan="2"><p>Copyright © 2017-{{getNowDate()}} Tujiawang</p></td></tr>
  </table>
 </p>
</template>
<script>
 import axios from 'axios'
 axios.defaults.withCredentials = true
 export default{
  data(){
   return {
    username:'',
    pwd:''
   }
  },
  methods: {
   login() {
    var params = new URLSearchParams();
    params.append('username', this.username);
    params.append('password', this.pwd);
    axios.post(this.HOST+'/home/system/login',params).then(res => {
      if(res.data.code ==1){
       sessionStorage.username = this.username;
       this.$router.push({path:'/main'})
      }else{
       alert('登录失败')
      }
    })
   },
   getNowDate(){
    var d = new Date();
    return d.getFullYear();
   }
  }
 }
</script>
Nach dem Login kopieren

Die Anmeldeseite oben. Hinweis: Bei der Anmeldemethode muss eine erfolgreiche Anmeldung in sessionStorage geschrieben werden, damit das Routing beurteilt werden kann

Das Wichtigste ist der Inhalt der Routing-Datei:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'login',
    component: (resolve)=>{require(['../components/Login'],resolve)}
  },
  {
    path: '/main',
    name: 'main',
    component: (resolve)=>{require(['../components/Home'],resolve)},
    redirect: 'main/info',
    children: [{
        path: 'info',
        meta: {
          id:-1
        },
        component: (resolve)=>{require(['../components/Main'],resolve)}
      }
    ]
  },
  {
    path: '/vips',
    name: 'vips',
    component: (resolve)=>{require(['../components/Home'],resolve)},
    redirect: 'vips/list',
    children: [{
        path: 'list',
        meta: {
          id:0
        },
        component: (resolve)=>{require(['../components/VipsList'],resolve)}
      },
      {
        path: 'detail',
        meta: {
          id:0
        },
        component: (resolve)=>{require(['../components/VipsDetail'],resolve)}
      },
      {
        path: 'userlog',
        meta: {
          id:0
        },
        component: (resolve)=>{require(['../components/UserLog'],resolve)}
      }
    ]
  }
];
const router = new Router({
  routes
});
/**
 * to:表示目标路由
 * from:表示来源路由
 * next:表示执行下一步操作
 */
router.beforeEach((to, from, next) => {
  if (to.path === '/login') { // 当路由为login时就直接下一步操作
    next();
  } else { // 否则就需要判断
    if(sessionStorage.username){ // 如果有用户名就进行下一步操作
     next()
    }else{
     next({path: '/login'}) // 没有用户名就跳转到login页面
    }
  }
})
export default router
Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ausführliche Erläuterung der Schritte zur Swiper-Bedienung


Eine Zusammenfassung der Angular4-Leistungsoptimierungsmethoden

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Anmeldekontrollfunktion in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!