技术点：

  • vue

  • vue-router

  • vue-resource


登陆说明： 

  1. 先获取cookie中的信息，如果存在，就直接跳转到主页，如果不存在，就转到登陆页面

  2. 登陆页面提交用户信息到服务器，服务器进行验证，返回相关信息，如果验证成功，将相关信息写入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: '',
  components: { App }
})

App.vue

Index.vue

说明：在主页面有一个退出链接，退出时触发退出事件。根据https://router.vuejs.org/zh-cn/api/router-link.html文档说明router-link  会拦截点击事件，因些这里如果直接用@click会没有反应，这里根据vue2.0官方文档，如果要监听click事件，需要加上native修饰符。

Login.vue

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 }