vue中实现登录控制

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

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

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

如果觉得有帮助请我吃个糖吧！