Vue从零开始开发管理系统（学习笔记第四节）

 前言

在完成了开发登录页面后，本节将会进行路由守卫的编写，以及导航菜单的制作。

---

一、保存token至sessionStorage

登录成功后后端服务器会给咱们的用户一个token，它是一个登录令牌，为此我们需要对它进行本地化。

使用window函数，保存token至sessionStorage

this.$refs.LoginFormRef.vaildate( async (vaild)=>{
    if(!vaild) return;
    const {data:res} = await this.$http.post('login',this.form)
    if(res.meta.status!==200) return this.$message.error(res.meta.msg)
    this.$message.success(res.meta.msg)
    window.sessionStronge.setItem('token",res.data.token)
}

二、通过编程式导航和导航守卫，实现页面跳转

1.跳转指定页面

通过编程式导航实现(this.$router)

        precheck(){
            this.$refs.LoginFormRef.validate( async (valid)=>{
                if(!valid) return;
                const {data:res} = await this.$http.post('login',this.form)
                if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
                this.$message.success(res.meta.msg)
                window.sessionStorage.setItem('token',res.data.token)
                this.$router.push('/home')
            })

2.路由导航守卫的用法

通过修改地址栏地址也可以进入/home页面，所以我们要使用导航守卫实现：未登录的用户无法跳转，并跳转回login页面。

router.beforeEach((to,from,next)=>{})

to:代表要去哪个路径；

from:代表从哪个路径来；

next:放行函数，next()为直接放行，next(路径)表示强制跳转到该路径；

const router = new VueRouter({
  routes
})

router.beforeEach((to,from,next)=>{
    if(to.path==='/login') return next()
    const tokenStr = window.seesionStronge.getItem('token')
    if(!tokenStr) return next('login')
    next()
})

export default router

三、编写Home页面

1.引入布局容器和导航菜单

在element.js中按需引入

import { Container, Header, Aside, Main} from 'element-ui'

Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)

import {Menu, Submenu, MenuItem} from 'element-ui'

Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)

  2.创建一个新组件，命名为HomePage.vue，初始化并在路由中添加 

import Home from '../components/HomePage.vue'

const routes = [
  {path:'/login',component:Login},
  {path:'/',redirect:'/login'},
  {path:'/home',component:Home}
]

 3.编写布局和导航栏 (!!!不要忘了把最外层div删除啊）

        <el-container>
            <el-header>Header</el-header>
            <el-container>
                <el-aside width="200px">Aside</el-aside>
                <el-main>Main</el-main>
            </el-container>
        </el-container>

            <el-aside width="200px">
                <el-menu background- color="#545c64" text-color="#fff" active-text-color="#ffd04b"> 
                    <el-submenu index="1"> 
                        <template slot="title"> 
                            <i class="el- icon-location"></i> 
                            <span>导航一 </span> 
                        </template> 
                            <el-menu-item index="2"> 
                                <i class="el- icon-menu"></i> 
                                <span>导航二 </span> 
                            </el-menu-item> 
                    </el-submenu> 
                </el-menu>
            </el-aside>

4.CSS美化 

<style scoped>
.el-container{
    height: 100%;
}
.el-header{
    background-color: rgb(15, 20, 35);
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: #fff;
    font-size: 20px;
}
.el-aside{
    background-color:#333744;
}
.el-menu{
    border-right: none; 
} 
</style>

<el-menu background-color="#333749"  text-color="#fff"  active-text-color="#89253e"> 

---

总结