vue.js php登录验证,vue.js控制用户登录

这次给大家带来vue.js控制用户登录，vue.js控制用户登录的注意事项有哪些，下面就是实战案例，一起来看一下。

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

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

	管理后台 管理员： 密 码：
Copyright © 2017-{{getNowDate()}} Tujiawang

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();

}

}

}

上面的登录页面注意：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中来判断，和上面方法一样的。

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

推荐阅读：