How to make login control function in vue.js

This time I will show you how to make login control function in vue.js. What are the precautions for vue.js to make login control function. The following is a practical case, let’s take a look.

Using vue-router to control login in vue is very common in background management systems, but it is not like the familiar process before. However, as long as everyone understands the use of vue-router, it is easy to implement.

First we need to write the login page and main page:

<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="How to make login control function in 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>

Note on the login page above: In the login method, successful login needs to be written to sessionStorage for routing to judge

The most important thing is the content in the routing file:

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps to operate swiper images

Summary of Angular4 performance optimization methods

The above is the detailed content of How to make login control function in vue.js. For more information, please follow other related articles on the PHP Chinese website!