退出登录与路由拦截

样式如下所示

搭建退出登录的接口

easy Mock 创建一个拟定的接口

header下面的index.vue的文件

也就是饿了么UI组件下面配置方法退出登录
1、绑定@command="handleCommand"方法
2、采用switch语句判断，用户操作是修改密码还是退出登录
3、移除本地缓存localStorage.removeItem(“jhj-token”);
4、跳转到登录页面this.$router.push(’/index’)

路由的拦截

对路由效验并拦截
const token = localStorage.getItem(“jhj-token”);
1、拿取得本地token，如果拿不到就跳转登录页面next({path: ‘/login’})，const token = localStorage.getItem(“jhj-token”);
2、 const userinfo = localStorage.getItem(“jhj-user”);监测是否本地有用户信息，如果有就跳转next(),用户指定的页面
3、如果没有用户信息，则从token传入用户信息接口重新请求并保存，并跳转指定页面
4、如果token请求不到用户信息则跳转到登录页面

// 权限的效验，
// 采用vue-router中的前置钩子函数 beforeEach(to,from,next)
// 当路由跳转前进行判断，是否登录过
// to即将进入的目标路由对象
// from即将离开的路由对象
// next 是一个方法，可以指定路由，进行路由跳转



// 引入router.js
import router from './router'

import { getUserInfo } from './api/login'




router.beforeEach((to, from, next) => {
    // 获取页面保存的token值
    const token = localStorage.getItem("jhj-token");

    // 如果没有获取到token，要访问非登陆页，则不让访问，加到登录页面
    if (!token) {
        // 如果没有token，并且访问的不是非登录页面，则下面
        if (to.path !== '/login') {
            // 跳转到目标路由
            next({ path: '/login' })

        } else {
            // 否则别人请求的就是登录页面
            next()
        }

    }
    // 获取到token
    else {
        // ==两个等号强比较
        // 如果请求的路由/login ,就去目标路由
        if (to.path === '/login') {
            next()
        }
        else {
            const userinfo = localStorage.getItem("jhj-user");
            // 请求的路由非登录页面，先在本地查看是否有用户信息，
            if (userinfo) {
                next()
            }
            // 如果没有用户信息，则请求导入信息
            else {
                getUserInfo(token).then(response => {

                    const resp = response.data
                    // 如果返回的flag为true，则
                    if (resp.flag) {
                        // 获取到用户信息，则进入非登录页面，否则回到登录页面
                        // 转化为json字符串,保存到本地
                        localStorage.setItem("jhj-user", JSON.stringify(resp.data));
                        // 跳转到指定的目录
                        next()

                    }
                    else {
                        // 未获取到用户信息，则需要重新登录
                        next('/login')
                    }
                })

            }


        }

    }



})