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删除啊）

        
            Header
            
                Aside
                Main
            
        

            
                 
                     
                         
                             
                                 
                                导航二  
                             
                     
                
            

4.CSS美化 

---

总结