VUE登录页面路由守卫与拦截设置走过的弯路

VUE登录页面路由守卫与拦截设置走过的弯路

经过室友的指点，写完了VUE登录页面的路由守卫，登录接口调用，以及登录后跳转。希望这篇文章能帮到同样走过这个弯路的人，少走弯路。因为这个登录页面，我损失了2个工作机会。话不多说，回到文章。

温馨提示，本文适合新人，第一次写vue登录，对于路由守卫，axios请求，等都不熟悉的小白使用，大神请绕道。

核心技术栈

• Vue2.XX
• Vue-router
• Vuex
• axios
• ES6

其他相关知识点

• HTML5
• CSS3
• JS
• 服务器请求
• cookies
• promise
• LESS
• promise
• 打断点校验

---

任务目标

做一个后台管理系统，第一个需求就是后台登录模块，我们要实现以下目标

登录检验

• 用户凭借正确的账户密码登录系统,前端对于用户的登录信息进行校验

获得Token

• 存储用户的cookies，使得后台得到唯一的token

路由守卫

• 如果用户输入后台管理页面的URL（网址），让用户返回登录URL，不让用户随意进入

流程图

Created with Raphaël 2.1.2 开始登录 路由守卫 是否从登录页登录？ 从登录页登录 登录校验 输入是否正确？ 登录成功 yes yes no

为了实现这些目标，我们首先做一个后台登录页面，这部分大部分前端，后台都能实现，略过不提。。

登录检验

用户凭借正确的账户密码登录系统,前端对于用户的登录信息进行校验。
账号如果错误，账户名不对的报错
密码如果错误，弹出密码不对。

//Login.vue
<el-button type="primary" @click="Login()">登录</el-button>

//Login.vue
                       Login() {
                if (this.loginForm.uid !== '') {
                    if (this.loginForm.pwd !== '') {
                        login(
                            {uid: this.loginForm.uid, 
                            pwd: this.loginForm.pwd}
                        ).then (function (response) {
                            // console.log(response);
                            if (response.data && response.data.code == "0") {
                                // 记录token
                                var token = response.data.data;
                                cookies({token: token})
                                store.state.token = token
                                // console.log("login success token is " + ``);
                                router.push({path: '/home'})
                            } else {
                                console.log(response.data.message);
                            }
                        }).catch (function (error) {
                            console.log(error)
                        });
                    } else {
                        console.log("password invalid")
                    }
                } else {
                    console.log('登录或者密码不能为空')
                }
            }

api.js
import {request} from '@/utils/request'

const addUser = (params) => {
    return request.post(`/api/common/sysuser/`,params)
}

export default login

路由守卫

如果用户输入后台管理页面的URL（网址），让用户返回登录URL，不让用户随意进入

router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {
        //判断该路由是否需要登录权限
        if (cookies('token')) {
            //通过封装好的cookies读取token，如果存在，name接下一步如果不存在，那跳转回登录页
            next()//不要在next里面加"path:/",会陷入死循环
        }
        else {
            next({
                path: '/login',
                query: {redirect: to.fullPath}//将跳转的路由path作为参数，登录成功后跳转到该路由
            })
        }
    }
    else {
        next()
    }
})

快捷键

• 引用 Ctrl + Q
• 插入代码 Ctrl + K
• 插入图片 Ctrl + G
• 重做 Ctrl + Y

接口联调系列文章留坑

接口联调1：表格的增删改查

接口联调2：表单的增删改查