vue.js中实现登录控制的方法示例

<template> <div 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> </div></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>

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