VUE登录页面路由守卫与拦截设置走过的弯路
VUE登录页面路由守卫与拦截设置走过的弯路经过室友的指点,写完了VUE登录页面的路由守卫,登录接口调用,以及登录后跳转。希望这篇文章能帮到同样走过这个弯路的人,少走弯路。因为这个登录页面,我损失了2个工作机会。话不多说,回到文章。温馨提示,本文适合新人,第一次写vue登录,对于路由守卫,axios请求,等都不熟悉的小白使用,大神请绕道。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,不让用户随意进入
流程图
为了实现这些目标,我们首先做一个后台登录页面,这部分大部分前端,后台都能实现,略过不提。。
登录检验
用户凭借正确的账户密码登录系统,前端对于用户的登录信息进行校验。
账号如果错误,账户名不对的报错
密码如果错误,弹出密码不对。
//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:表单的增删改查
更多推荐
已为社区贡献1条内容
所有评论(0)