全国咨询热线:18720358503

怎么建立打卡小程序_vue登录以及权限验证相关的

类别:行业新闻 发布时间:2021-01-06 浏览人次:

vue登录以及权限验证相关的实现       这篇文章主要介绍了vue登录以及权限验证相关的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
关键词:前后端分离、jwt、登录、权限验证

最近在做一个小应用,需要用到vue实现登录,以及给不同路由设置权限。在网上看了很多文章,讲的是乱七八糟。感叹国内技术类文章实在是差劲,抄来抄去。这篇文章就说说我最后是如何实现的。

前后端分离项目中,后端提供api接口给前端,使用jwt发放权限。

首先前端提供用户名和密码请求登录接口,后端验证之后返回给前端一个token,之后前端在请求需要权限的接口时携带这个token就可以了。

两个问题

现在面临两个问题,

首先vue中不同的路由有不同的权限,比如我要访问后台 /admin, 就需要先登录才行,而有的页面不需要登录。

第二个问题是,vue组件中使用axios请求后台服务时,不同的接口有不同的权限。

后端接口权限

先来解决第二个问题。vue不同组件都要用到axios,我们在全局为axios添加request和response的拦截器。

也就是,在发起请求之前,先检测header是否携带token信息。在接收响应之前,先查看后端返回状态码,如果说需要token验证就跳转到登录界面。

在main.js添加如下,或者新增一个http.js文件:

// * http request 拦截器
axios.interceptors.request.use(
 config = {
 // * 判断是否存在token,如果存在的话,则每个http header都加上token
 // * token会在登录之后存储在本地
 if (localStorage.token) {
 config.headers["Authorization"] = `Bearer ${localStorage.token}`;
 return config;
 err = {
 return Promise.reject(err);
// * http response 拦截器
axios.interceptors.response.use(
 response = {
 let data = response.data;
 // * 正常返回数据
 if (data.code === 0) {
 // * 返回data
 return data
 // * 如果code是20103 表示token未认证(后端定义的错误码)
 // * 跳转到login
 if (data.code === 20103) {
 router.replace('/login')
 return Promise.reject(data);
 error = {
 return Promise.reject(error);
Vue.prototype.$http = axios;

现在发起的任何请求之前都会检查是否携带token,如果没有就跳到login界面。

在login中,携带用户名和密码获取token之后,存放到本地。

login.vue:

axios.post('/api/login', {
 email: this.email,
 password: this.password
 }) .then((res) = {
 // * 存储token
 localStorage.setItem('token', res.data.token);
 ("essful");
 // * 跳转回登录前页面
 this.$router.push({path: this.$route.query.redirect || '/admin',})
 }).catch((error) = {
 console.error(error)
 });

前端vue路由权限

现在,访问后端接口的权限问题解决了。但是在vue中我不同的页面有不同的访问权限该如何处理?vue-router官方文档给出了例子:

在需要权限的路由添加meta信息,表明该路由需要登录才能访问,然后在所有路由跳转之前添加处理函数,如果没有auth,跳转到登录:

path: '/admin',
name: 'admin',
component: () = import('../views/admin/Admin.vue'),
// * 需要登录才能访问
meta: {requiresAuth: true},

router.beforeEach((to, from, next) = { if (to.matched.some(record = record.meta.requiresAuth)) { // * 对于需要auth的路径 // * 没有token信息,redirect to login if (!localStorage.token) { next({ path: '/login', query: {redirect: to.fullPath} } else { next() } else { next() // 确保一定要调用 next() })

登出的话,清除token信息即可。

localStorage.removeItem("token")

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


推荐阅读

怎么建立打卡小程序_vue登录以及权限验证相关的

vue登陆及其管理权限认证有关的完成 本文关键详细介绍了vue登陆及其管理权限认证有关的完成,原文中根据实例编码详细介绍的十分详尽,对大伙儿的学习培训或是工作中具备一...

2021-01-06
家政保洁微信小程序_JavaScript使用百度ECharts插件

JavaScript应用百度搜索ECharts软件绘图饼图实际操作实例 本文关键详细介绍了JavaScript应用百度搜索ECharts软件绘图饼图实际操作,融合案例方式剖析了JavaScript应用百度搜索ECharts软件绘...

2021-01-06
广州凡科互联网科技股份有限公司招聘Java软件工

招聘人数:12职位信息1、参与产品需求评审,对需求的提出给予技术建议,做好必要的预研工作,并对实施难度给出初步评估;2、编写系统概要设计、数据库设计、接口设计,进行设计...

2021-01-06
电子商务网站建设如何做网络营销

电子商务网站推广是首当其冲的任务,那么SEO就是其最基本的、也是最重要的推广方式,很多做电子商务网站的SEOer都是通过各种方式、手段去为网站获得流量,无论是有用还是没用,...

2021-01-06
利用特别专业的网站优化平台,提高自己产品排

运用非常技术专业的seo优化服务平台,提升自身商品排行编写:凡科网SEO 時间:2018/7/19 每个人都可以能有着理想,每个人都想过自身想过的日常生活。假如大家大伙儿要想让自身完成理...

2021-01-06
【快速排名】关键词排名起伏大怎么解决?

针对重要词在起伏非常大的状况,相信绝大部分网站网站站长都是有遇上过,有时候候从立即跳至前3页之后也是常常出現的。针对这类状况大家应当如何办呢?怎样才可以使重要...

2021-01-06
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信