vue-判断用户是否登录
在项目中,最基本的登录都是必须的,结合Vue的路由,涉及最多的就是登录状态的判断。(1)判断登录方案需要满足下面几点:未登录状态下的刷新:在需要登录页面中刷新是需要跳转到登录页的;在不需要登录的页面中刷新,不需要跳转;(2)在未登录状态下,跳转到需要登录页面时,会直接跳转到登录页;一、先在路由文件里修改--------router / index.js 路由中加校验直接在路由配置...
·
在项目中,最基本的登录都是必须的,结合Vue的路由,涉及最多的就是登录状态的判断。
(1)判断登录方案需要满足下面几点:
未登录状态下的刷新:
- 在需要登录页面中刷新是需要跳转到登录页的;
- 在不需要登录的页面中刷新,不需要跳转;
(2)在未登录状态下,跳转到需要登录页面时,会直接跳转到登录页;
一、先在路由文件里修改--------router / index.js 路由中加校验
直接在路由配置的时候,给路由添加一个自定义的meta对象,在meta对象中可以设置一些状态,来进行一些操作。用它来做登录校验再合适不过了
{
path: "/mengxiang",
name: "Mengxiang",
component: Mengxiang,
meta: {
needLogin: true //需要加校检判断的路由
},
},
二、main.js 中判断该路由是否需要登录权限
router.beforeEach(function(to, from, next) {
if (to.meta.needLogin) {
//页面是否登录
if (localStorage.getItem("token")) {
//本地存储中是否有token(uid)数据
next(); //表示已经登录
} else {
//next可以传递一个路由对象作为参数 表示需要跳转到的页面
next({
name: "login"
});
}
} else {
//表示不需要登录
next(); //继续往后走
}
});
三、login.vue 登录组件内,登陆成功后的处理
methods: {
onClickLeft() {
this.$router.go("-1");
},
login() {
axios({
type: "get",
url: "请求的接口路径",
params: { username: this.phone, password: this.password }
}).then(res => {
console.log(res);
localStorage.setItem("token", this.phone);
this.$router.push({
name: "Home"
});
});
},
}
以上就实现了判断是否登录的状态,如果未登录的状态就会跳转到登录页面
更多推荐
已为社区贡献1条内容
所有评论(0)