vue.js에서 로그인 제어 기능을 만드는 방법

이번에는 vue.js에서 로그인 제어 기능을 구현하는 방법을 보여드리겠습니다. vue.js에서 로그인 제어 기능을 구현하기 위한 주의 사항은 무엇입니까?

vue에서 로그인 제어를 구현하기 위해 vue-router를 사용하는 것은 백그라운드 관리 시스템에서 매우 일반적이지만 이전의 익숙한 프로세스와는 다릅니다. 그러나 모든 사람이 vue-router의 사용을 이해하는 한 구현하기 쉽습니다.

먼저 로그인 페이지와 메인 페이지를 작성해야 합니다:

<template>
 <p>
  </p>
<table>
   <tr><td> </td></tr>
   <tr>
    <td>
     <table>
      <tr><td> </td></tr>
      <tr>
       <td> </td>
       <td>
        <table>
          <tr><td></td></tr>
          <tr>
            <td>
              <img  src="/static/imghwm/default1.png" data-src="../../static/images/logo.png" class="lazy" alt="vue.js에서 로그인 제어 기능을 만드는 방법" >
             />
            </td>
          </tr>
        </table>
       </td>
       <td> </td>
      </tr>
      <tr><td> </td></tr>
     </table>
    </td>
    <td>
     <table>
      <tr><td> </td></tr>
      <tr>
       <td> </td>
       <td>
          <table>
            <tr><td><h4 id="管理后台">管理后台</h4></td></tr>
            <tr>
<td>管理员：</td>
<td><input></td>
</tr>
            <tr>
<td>密  码：</td>
<td><input></td>
</tr>
            <!-- <tr><td>验证码：</td><td><input type="text" name="" value="" style="width:80px;"/></td></tr> -->
            <tr>
<td> <input>
</td>
<td> </td>
</tr>
          </table>
       </td>
       <td> </td>
      </tr>
      <tr><td> </td></tr>
     </table>
    </td>
   </tr>
   <tr><td><p>Copyright © 2017-{{getNowDate()}} Tujiawang</p></td></tr>
  </table>
 
</template>
<script>
 import axios from &#39;axios&#39;
 axios.defaults.withCredentials = true
 export default{
  data(){
   return {
    username:&#39;&#39;,
    pwd:&#39;&#39;
   }
  },
  methods: {
   login() {
    var params = new URLSearchParams();
    params.append(&#39;username&#39;, this.username);
    params.append(&#39;password&#39;, this.pwd);
    axios.post(this.HOST+&#39;/home/system/login&#39;,params).then(res => {
      if(res.data.code ==1){
       sessionStorage.username = this.username;
       this.$router.push({path:&#39;/main&#39;})
      }else{
       alert(&#39;登录失败&#39;)
      }
    })
   },
   getNowDate(){
    var d = new Date();
    return d.getFullYear();
   }
  }
 }
</script>

위 로그인 페이지에 대한 참고 사항: 로그인 메소드에서 성공적인 로그인은 심사위원에게 라우팅하기 위해 sessionStorage에 작성되어야 합니다

가장 중요한 것은 내용입니다. 라우팅 파일:

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

믿으세요. 이 기사의 사례를 읽으신 후, 더 흥미로운 정보를 얻으려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 도서:

스와이프 동작 단계에 대한 자세한 설명

Angular4 성능 최적화 방법 요약

위 내용은 vue.js에서 로그인 제어 기능을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!