技术点：
vue
vue-router
vue-resource
登陆说明：
先获取cookie中的信息，如果存在，就直接跳转到主页，如果不存在，就转到登陆页面
登陆页面提交用户信息到服务器，服务器进行验证，返回相关信息，如果验证成功，将相关信息写入cookie，并跳转到主页。
主要代码说明：
main.js
import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
import VueResource from ‘vue-resource‘
...
import App from ‘./App‘
import routes from ‘./router/index‘
import cookie from ‘./util/cookies.js‘
Vue.prototype.$cookie = cookie
Vue.use(Vuex)
Vue.use(VueResource)
Vue.use(VueRouter)
const router = new VueRouter({
routes
})
router.beforeEach((to, from, next) => {
// 判断该路由是否需要登录权限
if (to.meta.requireAuth) {
var cookie = Vue.prototype.$cookie.getCookie(‘user‘); // beforeEach钩子注册时，vue组件还没有创建
if ( cookie != null ) {
next();
} else {
next({
path: ‘/login‘,
query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
})
}
} else {
next();
}
})
new Vue({
el: ‘#app‘,
store,
router,
template: ‘<App/>‘,
components: { App }
})App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: ‘app‘,
}
</script>Index.vue
<template>
<div>
<router-link to="/login" @click.native="logout">退出</router-link>
</div>
</template>
<script>
export default {
methods: {
logout: function(event) {
var self = this;
self.$cookie.delCookie(‘user‘);
}
}
}
</script>说明：在主页面有一个退出链接，退出时触发退出事件。根据https://router.vuejs.org/zh-cn/api/router-link.html文档说明router-link 会拦截点击事件，因些这里如果直接用@click会没有反应，这里根据vue2.0官方文档，如果要监听click事件，需要加上native修饰符。
Login.vue
<template>
<div class=‘login‘>
<Form ref=‘formLogin‘ :model=‘formLogin‘ :rules=‘formrule‘>
<Row>
<Col span="1" offset="10">用户: </Col>
<Col span="3">
<FormItem prop="user">
<Input type="text" v-model="formLogin.user" placeholder="Username">
<Icon type="ios-person-outline" slot="prepend"></Icon>
</Input>
</FormItem>
</Col>
</Row>
<Row>
<Col span="1" offset="10">密码: </Col>
<Col span="3">
<FormItem prop="password">
<Input type="password" v-model="formLogin.password" placeholder="Password">
<Icon type="ios-person-outline" slot="prepend"></Icon>
</Input>
</FormItem>
</Col>
</Row>
<Row>
<Col span="2" offset="12">
<Button type="primary" @click="handleSubmit(‘formLogin‘)" :loading="logining">登录</Button>
</Col>
</Row>
</Form>
</div>
</template>
<script>
export default {
data () {
return {
logining: false,
formLogin: {user:‘‘, password:‘‘},
formrule: {
user: [
{ required: true, message: ‘请填写用户名‘, trigger: ‘blur‘ }
],
password: [
{ required: true, message: ‘请填写密码‘, trigger: ‘blur‘ },
{ type: ‘string‘, min: 6, message: ‘密码长度不能小于6位‘, trigger: ‘blur‘ }
]
}
}
},
methods: {
handleSubmit(value) {
var self = this;
self.$refs[value].validate((valid) => {
if (valid) {
self.logining = true;
self.$http.post(‘/logindata‘, self.formLogin).then(
resource => {
let expireMin = 2;
self.$cookie.setCookie(‘user‘, self.formLogin.user, expireMin);
self.$router.push({ path: ‘/‘});
self.$Message.success(‘登录成功!‘);
},
resource => {
return resource.status;
}
);
} else {
self.$Message.error(‘表单验证失败!‘);
}
})
}
}
}
</script>router/index.js
import Login from ‘@/components/Login‘
import Index from ‘@/components/Index‘
export default [{
path: ‘/login‘,
name: ‘Login‘,
component: Login
}, {
path: ‘/‘,
name: ‘Index‘,
component: Index,
meta: { requireAuth: true, }
}
]util/cookies.js
function getCookie(name) {
var reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if ( Array.isArray(document.cookie.match(reg))) {
var arr = document.cookie.match(reg);
return unescape(arr[2]);
}
else
return null;
}
function setCookie(c_name, value, expire) {
var exdate = new Date();
exdate.setMinutes(exdate.getMinutes() + expire);
document.cookie = c_name + "=" + escape(value) + ((expire == null) ? "" : ";expires=" + exdate.toGMTString());
}
function delCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
console.log(exp);
if (cval != null)
document.cookie = name + "=" + cval + ";expires=" +exp.toGMTString();
}
export default { getCookie, setCookie, delCookie }本文出自 “lang8027” 博客，请务必保留此出处http://lang8027.blog.51cto.com/9606148/1969207
原文地址：http://lang8027.blog.51cto.com/9606148/1969207
