vue.js控制用户登录

vue中使用vue-router实现登录的控制在做后台管理系统中很常见，但是不想之前熟悉的流程那样，不过只要大家理解vue-router的使用也是很好实现的。

首先我们需要编写登录页面和主页面：

<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>

上面的登录页面注意：login方法中登录成功需要写入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

目前这个只是简单的处理，这种方法官方叫做路由守卫，还有一种写法就是在meta中添加是否需要登录的控制，在beforeEach中来判断，和上面方法一样的。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

关于JS抛出错误使用汇总

JS中怎样避免特性与浏览器推断