五、项目权限----路由守卫beforeEach

一、退出系统

这里我们实现退出登录的操作，删除存储在localStorage中的用户信息，下面实现：

1.在home组件里写，退出登录，需要后台接口，在node的router.js中，写一个退出登录的后台接口

// 退出登录
router.post("/user/logout", (req, res) => {
    let body = req.body
    console.log(body);
})

2.在 src\api\login.js 添加退出方法 logout 

// /退出登录
export function logout(token) {
    return request({
        url: "/user/logout",
        method: "post",
        data: {
            token
        }
    })
}

3.然后去写点击退出登录时，发起请求的事情，去AppHeader的index.vue文件，

<script>
import { logout } from "@/api/login.js";
export default {
   methods: {
    handleCommand(command) {
            // command=='a' <===>  修改密码
            if (command == 'a') {
                // 这里后面进行修改密码操作
            } else if (command == 'b') {
                logout(localStorage.getItem("sms-token")).then((res) => {
                    console.log(res, '成功！');
                }).catch(err => {
                    console.log(err, 'no成功！');
                })
            }
            // this.$message('click on item ' + command);
        }
    }
};
</script>

4.去数据库中查有没有这个token值，去node的router.js中，添加

// 退出登录
router.post("/user/logout", (req, res) => {
    let body = req.body
        // console.log(body);
    User.findOne({
        token: body.token
    }).then((data, err) => {
        // console.log(data, err);
        if (err) {
            return res.status(500).json({ //如果err，就是错误就是数据库中没有
                code: 3000,
                flag: false,
                message: "服务器后台错误"
            })
        }
        if (!data) { //如果信息没查到
            return res.status(200).json({ //数据库中没有，就是token不存在
                code: 4000,
                flag: false,
                message: "token数据不存在"
            })
        }
        return res.status(200).json({
            code: 2000,
            flag: true,
            message: "退出成功 "
        })
    })
})

5，这里我们发现退出登录时，后台返给我们的code是4000，token数据不存在，是因为存储数据的时候我们多包了一层双引号，现在去掉token外的“”，找到login的index.vue，删除"sms-token"下面的JSON.stringify

 6.接下来，退出登录，让它回到登录页面，在AppHeader的index.vue中：

<script>
import { logout } from "@/api/login.js";
export default {
 methods: {
        handleCommand(command) {
            // command=='a' <===>  修改密码
            if (command == 'a') {
                // 这里后面进行修改密码操作
            } else if (command == 'b') {
                logout(localStorage.getItem("sms-token")).then((res) => {
                    if (res.data.flag) {
                        // 退出登录后，把存储在localStorage的信息删除掉
                        localStorage.removeItem("sms-token")
                        localStorage.removeItem("sms-user");
                        // 弹出提示信息
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                        // 跳转到登录界面
                        this.$router.push("/login")
                    } else {
                        this.$message.error('error!', err);
                    }
                }).catch(err => {
                    this.$message.error('error!', err);
                })
            }
        }
    }
};
</script>

二、权限校验——路由守卫

需求：当用户未登录时，不让访问非登录页面，应该回到登录页面进行登录。

权限校验：通过router路由前置钩子函数 beforeEach() 导航守卫，在跳转路由前进行拦截判断是否已经登录，如果已登录，则进行路由跳转，如果没有则回到登录页

1. 新建 router\quanxian.js 权限校验文件，代码如下: 

/*前置路由钩子函数to ：即将要进入的目标路由对象from ：当前导航正要离开的路由对象next : 调用该方法，进入目标路由*/
// 没有token值哪都不能去,就是不能进到主页,你不登录就不让进去
import router from './index'

router.beforeEach((to, from, next) => {
    let token = localStorage.getItem('sms-token')
    if (!token) { // 没有 token
        if (to.path == "/login") {
            next()
        } else if (to.path == "/register") {
            next()
        } else {
            next({ path: '/login' }) // 不允许访问其他路由, 回到登录页
        }
    }
})

2. 将quanxian.js 添加 到全局中,去main.js 引入

import '@/router/limit'//@代表src路径下

这一步就是没有token值哪都不能去，就是不能进到主页，你不登录就不让进去。

3.quanxian.js 权限校验文件，设置有token值的时候，代码如下: 

import router from './index'
import { info } from '@/api/login'

router.beforeEach((to, from, next) => {
    let token = localStorage.getItem('sms-token')
    if (!token) { // 没有 token
        if (to.path == "/login") {
            next()
        } else if (to.path == "/register") {
            next()
        } else {
            next({ path: '/login' }) // 不允许访问其他路由, 回到登录页
        }
    } else {
        if (to.path == "/login") {
            next()
        } else if (to.path == "/register") {
            next()
        } else {
            let userinfo = localStorage.getItem("sms-user") // 有token, 看下是否有用户信息
            if (userinfo) { // 有信息, 进入目标路由
                next()
            } else { // 通过token获取用户信息
                info(token).then(res => {
                    let resArr = res.data
                    if (resArr.flag) { // 获取到, 保存数据
                        localStorage.setItem("sms-user", JSON.stringify(resArr.data))
                        next()
                    } else {
                        next({ path: '/login' }) // 未获取到,重新登录
                    }
                })
            }
        }
    }
})