vue.js controls user login-JS Tutorial-php.cn

vue.js controls user login

php中世界最好的语言

Release： 2018-06-05 15:49:25

Original

1990 people have browsed it

This time I will bring you vue.js to control user login. What are the precautions for vue.js to control user login. 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 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>

Copy after login

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

Copy after login

Currently this is just a simple process. This method is officially called routing guard. Another way to write it is to add the control of whether login is required in meta and judge it in beforeEach. , the same method as above.

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!