Vue2.0-token权限处理

Posted 2022-05-26 reeber

token一种身份的验证，在大多数网站中，登录的时候都会携带token，去访问其他页面，token就想当于一种令牌。可以判断用户是否登录状态。本次页面是通过Element-ui搭建的登录界面

当用户登录的时候，向后端发起请求的时候，后端会返回给我一个token，前端可以进行校验，进行处理token

当前端拿到后端返回的token，可以通过localStorage存储到本地，然后通过jwt-decode对token进行解析，jwt-decode是一种对token的解析包，通过npm install jwt-decode

设置好存储方式后，当用户再次登录的时候，在浏览器段可以看点用户存储的token。

当页面很多地方需要用到token的时候，用户必须携带token才能访问其他页面，可以通过请求拦截和响应拦截设置，并且在响应拦截的时候处理token是否过时，过期时间是通过后端设置的，前端需要判断token的状态码是否过时就行

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

import axios from ‘axios‘ import  Loading ,Message from ‘element-ui‘  //引入了element-ui框架库 import router from ‘./router/index.js‘ let loading;   function startLoading()     loading =Loading.service(         lock: true,         text: ‘加载中...‘,         background: ‘rgba(0, 0, 0, 0.7)‘     );   function endLoading()     loading.close()   // 请求拦截   axios.interceptors.request.use(config =>       startLoading()     //设置请求头     if(localStorage.eleToken)         config.headers.Authorization = localStorage.eleToken            return config   , error =>     return Promise.reject(error)   )     // 响应拦截 axios.interceptors.response.use(response =>     endLoading()     return response , error =>     Message.error(error.response.data)     endLoading();       //获取状态码     const status = error.response;       if(status === 401)         Message.error("token失效,请重新登录");         //清除token         localStorage.removeItem(‘eleToken‘);         //重新登录         router.push(‘/login‘)            return Promise.reject(error) )   export default axios;

存储vuex

如果页面过多，不想数据来回传递，这时候就可以用到vuex来存储数据了，这样每个页面都可以通过store获取用户信息了。当用户拿到token令牌的时候，会得到用户的信息，

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

import Vue from ‘vue‘ import Vuex from ‘vuex‘   Vue.use(Vuex)   const type =     SET_AUTHORIZATION:"set_authorization",     SET_USER:"set_user"   const state =     isAuthorization:false,     user:   const getters =   //获取state状态  isAuthorization: state => state.isAuthorization,  user: user => state.user   const mutations=     [type.SET_AUTHORIZATION](state,isAuthorization)         if(isAuthorization)             state.isAuthorization = isAuthorization          else              isAuthorization = false              ,           [type.SET_USER](state,user)         if(user)             state.user = user          else              user=               const actions =     setAuthorization:(commit,isAuthorization) =>         commit(type.SET_AUTHORIZATION,isAuthorization)     ,     setsuer:(commit,user) =>         commit(type.SET_USER,user)        export const store = new Vuex.Store(     state,     getters,     mutations,     actions )

　　通过以上vuex设置，我们可以吧得到的token和用户的一些信息存储到vuex中，方便其他页面进行调用

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

submitForm(formName)       this.$refs[formName].validate((valid) =>         if (valid)           this.$axios.post(‘/api/users/login‘,this.loginUser).then(res =>                           const token = res.data;             //存储token             localStorage.setItem(‘eleToken‘,token)             //解析token             const decode = jwt_decode(token)             console.log(res)              // 存储到vuex             this.$store.dispatch("setAuthorization", !this.isEmpty(decode));             this.$store.dispatch("setsuer",decode)               // this.$router.push(‘/index‘)           )                )     ,<br>//封装的验证方法     isEmpty(value)       return (         value === undefined ||         value === null ||         (typeof value === "object" && Object.keys(value).length === 0) ||         (typeof value === "string" && value.trim().length === 0)       );

　虽然token和用户信息存储到vuex中了，当我们刷新浏览器的时候，存储的vuex数据都没有了，

  

这时候。我们需要在跟组件app.vue组件进行判断，token是否存在本地，存在就存放到vuex中

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

export default    name: ‘App‘,   created()     if(localStorage.setItem)       const decode = jwt_decode(localStorage.eleToken)         // 存储到vuex       this.$store.dispatch("setAuthorization", !this.isEmpty(decode));       this.$store.dispatch("setsuer",decode)        ,   methods:     isEmpty(value)       return (         value === undefined ||         value === null ||         (typeof value === "object" && Object.keys(value).length === 0) ||         (typeof value === "string" && value.trim().length === 0)       );

　路由守卫

路由跳转前做一些验证，比如登录验证，购物车，是网站中的普遍需求，在用户没有登录的状态下，是无法访问其他页面的，这是时候我们就可以通过beforeEach来判断用户是否登录，(原理不需要细讲，官方文档有，直接上代码),还是直接通过token去验证是否登录或者没有登录状态

1 2 3 4 5 6 7 8

router.beforeEach((to,from,next) =>   const isLogin = localStorage.eleToken ? true : false   if(to.path === ‘/login‘ || to.path === ‘register‘)     next()    else      isLogin ? next() : next(‘/login‘)    )

　　

 以上都是这次博客中所有的内容，如果喜欢，可以关注一下！！！