VUE项目实战13登录与退出功能-保存token和页面权限控制

Posted 光仔December

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE项目实战13登录与退出功能-保存token和页面权限控制相关的知识,希望对你有一定的参考价值。

接上篇《12、登录与退出功能-请求登录
上一篇我们讲解了点击登录后发起登录请求的操作,本篇我们来讲解登录成功之后,保存登录会话状态的操作。

一、登录后的事件简述

我们在登录成功之后,需要完成以下内容,来保持登录效果以及跳转登录首页:
1、将登录成功后的token,保存到客户端的sessionStorage中
1.1 项目中除了登录之外的其他API接口,必须在登录后才能访问
1.2 token只应在当前网站打开期间生效,所以将token保存在sessionStotage中。
2、通过编程式导航跳转到后台主页,路由地址是/home。

二、获取token并保存

保存token(令牌)就是为了保持登录状态,去访问只有登录后才能访问的API,必须要携带这个后台给我们颁发的token令牌。

那么为什么前面说到要把token保存在sessionStorage而不是localStorage中呢?
对于不了解以上两种前端存储模式的童鞋,我们先来回顾一下sessionStorage和localStorage(感兴趣的可以看我之前的VUE基础博文(【Vue学习总结】9.Vue结合localStorage和生命周期实现todolist】):
什么是loaclStroage?loaclStroage是html5中加入的新特性,该特性可作为本地存储来使用,即在浏览器上提供了一个5M大小的存储,将第一次请求的数据直接存储到本地,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)。
使用localStorage需要注意一下事项:
(1)IE8以上的IE版本才支持localStorage这个属性。
(2)localStorage的值类型限定为string类型,如果存储JSON对象类型,需要转换。
(3)localStorage在浏览器的隐私模式下面是不可读取的。
(4)localStorage存储内容多会导致页面卡顿。
(5)localStorage不能被爬虫抓取到。
(6)localStorage遵循同源策略,不同网站不能直接共用相同的localStorage。

localStorage还有个兄弟叫sessionStorage,他们唯一的区别就是localStorage是永久性存储,而sessionStorage在会话结束的时候其存储的键值对会被清空。

因为我们的登录状态需要仅在网站打开期间生效,浏览器关闭或者缓存被清除后,登录状态就要被清除的,所以这里选择使用sessionStorage。

其实之前我们访问登录API接口后,实际上是给我们反馈了一个token的,我们将它打印出来看看:

login(){
  this.$refs.loginFormRef.validate(async (valid)=>{
    if(!valid) return;//false 不执行登录
    //true执行登录
    const {data:res} = await this.$http.post("login",this.loginFrom);
    console.log(res);//打印返回的结果对象
    if(res.meta.status !== 200) return this.$message.error("登录失败!"+res.meta.msg);
    this.$message.success("登录成功!");
  });
}

点击登录后,F12查看控制台:

可以看到反馈的token参数,我们来编写保存的逻辑代码:

login(){
  this.$refs.loginFormRef.validate(async (valid)=>{
    if(!valid) return;//false 不执行登录
    //true执行登录
    const {data:res} = await this.$http.post("login",this.loginFrom);
    console.log(res);
    if(res.meta.status !== 200) return this.$message.error("登录失败!"+res.meta.msg);
    this.$message.success("登录成功!");
    //保存登录后的token状态
    window.sessionStorage.setItem("token",res.data.token);
    this.$router.push("/home");//登录跳转
  });
}

因为登录成功之后,需要跳转到后台首页,所以使用$router的push进行路由跳转 ,路由地址是“/home”。

我们重新刷新页面点击登录,在F12开发者工具的Application中,查看sessionStorage:

可以看到在回话存储中,看到了我们保存的token。同时页面地址跳转到了home页面。
注:不了解“$router.push”的同学,请查看我之前的博文“【Vue学习总结】19.编程式导航和Hash以及History模式

二、创建home组件

上面我们成功登录并保存了token,同时跳转到了home页面。由于我们没有创建home页面并设置路由,所以页面是白色的,我们来完成它。首先在components下面创建Home.vue文件,编写如下内容:

<template>
    <div>Home 组件</div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>

</style>

然后在路由规则文件/router/index.js下,引入Home组件并设置路由映射:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue' //引用Login组件
import Home from '../components/Home.vue' 

Vue.use(VueRouter)

const routes = []

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login }, //定义访问页面的路由地址
    { path: '/home',component: Home}
  ]
})

export default router

然后刷新页面,重新登录,发现可以正常跳转home页面了:

三、设置Home页面访问权限

由于我们的Home页面是需要在登录成功之后才可以进行访问的,所以登录之前我们要控制用户无法访问该页面,如何做呢?

我们需要用到“路由导航守卫”来控制访问权限。如果用户没有登录,但是直接通过URL访问特定页面,需要重新导航到登录页面。router的beforeEach方法就是“路由导航守卫”,我们可以遍历router的所有路由地址,并可以设置跳转的动作。思路很简单,如果当前访问页面是登录页面,就正常跳转,如果不是,就检测是不是登录状态(token是否为空),如果不是,就跳转到登录页面,如果是就正常跳转。
我们在路由规则文件/router/index.js下,编写“挂载路由导航守卫”的逻辑:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue' //引用Login组件
import Home from '../components/Home.vue' 

Vue.use(VueRouter)

const routes = []

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login }, //定义访问页面的路由地址
    { path: '/home',component: Home}
  ]
})
//挂载路由导航守卫
//to是我们跳转的路径,from是来自的路径,next为放行函数
router.beforeEach((to,from,next)=>{
  //如果用户访问登录页,直接放行
  if(to.path ==="/login") return next();
  //从sessionStorage中获取到保存的token值
  const tokenStr = window.sessionStorage.getItem("token");
  //没有token,强制跳转到登录页面
  if(!tokenStr) return next("/login");
  next();//有token,直接放行
})

export default router

重新刷新页面,清除缓存,我们强制访问home页面,发现被跳转到login页面,权限控制成功:

至此,登录后的状态保存和页面跳转及权限管理讲解完毕。
下一篇我们来讲解退出功能,以及提交我们的分支代码。

参考:黑马程序员(www.itheima.com)Vue项目实战教学视频

转载请注明出处:https://blog.csdn.net/acmman/article/details/120100858

以上是关于VUE项目实战13登录与退出功能-保存token和页面权限控制的主要内容,如果未能解决你的问题,请参考以下文章

VUE项目实战8登录与退出功能开发准备

Vue项目实战:电商后台管理系统(Vue+VueRouter+Axios+Element)

Vue项目实战:电商后台管理系统(Vue+VueRouter+Axios+Element)

VUE项目实战7登录与退出功能开发准备

[Vue项目实战]登录功能实现

VUE项目实战12登录与退出功能-请求登录