透過利用vue+vuex+axios這幾種技術實現登入、註冊頁權限攔截（詳細教學）

下面我就為大家分享一篇vue vuex axios實現登入、註冊頁權限攔截，具有很好的參考價值，希望對大家有幫助。

在GitHub上有很多寫好的模板，這個專案也是基於模板做的。

現在錄下我做的過程

#1、修改config資料夾裡的dev.env.js裡的BASE_API，把位址改成請求後端的公共部分

BASE_API: '"http://192.168.xx.xx"',

2、接下來就是操作src文件，先在views裡寫好vew元件（login.vue,regist. vue），寫好到router裡的index.js裡設定好路徑

login.vue

<template>
 <p class="login-container">
  <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
     label-width="0px"
     class="card-box login-form">
   <h3 class="title">登录</h3>
   <el-form-item prop="name">
  <span class="svg-container svg-container_login">
   <svg-icon icon-class="user"/>
  </span>
    <el-input name="name" disabled type="text" v-model="loginForm.name" autoComplete="on"
      placeholder="用户名"/>
   </el-form-item>
   <el-form-item prop="password">
  <span class="svg-container">
   <svg-icon icon-class="password"></svg-icon>
  </span>
    <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
      autoComplete="on"
      placeholder="密码"></el-input>
    <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye"/></span>
   </el-form-item>
   <el-form-item>
    <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
    登录
    </el-button>
   </el-form-item>
  </el-form>
  </p>
</template>
<script>
 export default {
 name: &#39;login&#39;,
 data() {
  const validateUsername = (rule, value, callback) => {
  if (value.trim().length<1) {
   callback(new Error(&#39;用户名不能为空&#39;))
  } else {
   callback()
  }
  };
  const validatePass = (rule, value, callback) => {
  if (value.trim().length < 1) {
   callback(new Error(&#39;密码不能为空&#39;))
  } else {
   callback()
  }
  };
  return {
  loginForm: {
   name: &#39;&#39;,
   password: &#39;&#39;
  },
  loginRules: {
   name: [{required: true, trigger: &#39;blur&#39;, validator: validateUsername}],
   password: [{required: true, trigger: &#39;blur&#39;, validator: validatePass}]
  },
  loading: false,
  pwdType: &#39;password&#39;
  }
 },
 methods: {
  showPwd() {
  if (this.pwdType === &#39;password&#39;) {
   this.pwdType = &#39;&#39;
  } else {
   this.pwdType = &#39;password&#39;
  }
  },
  handleLogin() {
  this.$refs.loginForm.validate(valid => {
   if (valid) {
   this.loading = true;
   this.$store.dispatch(&#39;Login&#39;, this.loginForm).then(() => {
    this.loading = false;
    this.$router.push({path: &#39;/&#39;});
   }).catch((e) => {
    this.loading = false
   })
   } else {
   console.log(&#39;error submit!!&#39;)
   return false
   }
  })
  }
 }
 }
</script>

router/index.js

{ path: '/login', component: _import('Login/login'), hidden: true }

#3、在api裡的login.js裡寫好與後端對接的介面位址，在stores裡的modules裡的user.js裡定義user，有state，mutations，action，具體的請求操作寫在action裡，login.vue或regist.vue呼叫user.js裡寫好的請求，getter.js裡定義store的getters

api/login.js

#

import request from '@/utils/request'
export function login(name,password) {
 return request({
 url: '/XX/XX',
 method: 'post',
 data: {
  name,
  password
 } 
 })
}

##stores/modules/user. js

  import { login,regist,logout } from '@/api/login'
  import { getToken,setToken } from '@/utils/auth'
  const user = {
  state: {
   name:'',
   token:''
  },
  mutations: {
   SET_NAME: (state, name) => {
   state.name = name;
   },
   SET_TOKEN: (state, token) => {
   state.token = token;
   setToken(token);
   }
  },
  actions: {
   // 登录
   Login({ commit }, userInfo) {
   const name = userInfo.name.trim();
   const password = userInfo.password.trim();
   return new Promise((resolve, reject) => {
    login(name, password).then(response => {
    const data = response.data;
    commit('SET_NAME', data.name);
    commit('SET_TOKEN', data.token);
    setName(data.name);
    setToken(data.token);
    resolve(response); }).catch(error => { reject(error) }) }) },
   // 注册 
   Regist({ commit }, userInfo) { 
   const name= userInfo.name.trim(); 
   const password = userInfo.password.trim(); 
   return new Promise((resolve, reject) => { 
    regist(name, password).then(response => { 
    const data = response.data; 
    commit('SET_NAME', data.name); 
    commit('SET_TOKEN', data.token);
    setName(data.name);setToken(data.token); 
    resolve(response);
    }).catch(error => { 
    reject(error) }) }) }, 
   // 登出 
   LogOut({ commit, state }) {
   return new Promise((resolve, reject) => {
   logout().then(response => {
    commit('SET_NAME', '');
    commit('SET_TOKEN', '');
    setName('');
    setToken(false);
    //removeName();
    //removeToken();
    resolve(response);
   }).catch(error => {
    reject(error)
   })
   })
  }, 
   // 前端 登出 
   FedLogOut({ commit }) { 
   return new Promise(resolve => {
  setToken(false);
 commit('SET_TOKEN', false);
 resolve()
   })
   }
  }
  }
  export default user

getter.js:

const getters={
 name:state=>state.user.name,
 token:state=>state.user.token
}
export default getter

4、在utils裡的auth.js裡對cookies進行操作，寫入，讀取，刪除使用者權限，是否登入的標誌等

import Cookies from 'js-cookies'
export function setName(name) {
 return Cookies.set("name", name);
}
export function getName() {
 return Cookies.get("name");
}
export function setToken(token) {
 return Cookies.set("token", token);
}
export function getToken() {
 return Cookies.get("token");
}

# #5、在permission.js裡寫白名單，對白名單以外的跳轉進行攔截然後跳轉登錄，同時判斷用戶權限，是否登錄,等

import router from './router'
import store from './store'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'// Progress 进度条样式
import {Message} from 'element-ui'
import {getName, getToken} from "@/utils/auth"; // 验权
const whiteList = ['/login', '/regist']; // 不重定向白名单
router.beforeEach((to, from, next) => {
 NProgress.start();
 if (whiteList.indexOf(to.path) !== -1) {
 next();
 } else {
 if (getToken()==="true") {
  next();
  NProgress.done()
 } else {
  next({path: '/login'});
  NProgress.done()
 }
 }
})
router.afterEach(() => {
 NProgress.done() // 结束Progress
})

6、utils裡的request.js裡寫攔截碼，對後端返回的特定碼進行攔截然後做相應的操作

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '../store'
// 创建axios实例
const service = axios.create({
 baseURL: process.env.BASE_API, // api的base_url
 timeout: 15000     // 请求超时时间
});
// respone拦截器
service.interceptors.response.use(
 response => {
 /**
 * code为非200是抛错 可结合自己业务进行修改
 */
 const res = response.data;
 //const res = response;
 if (res.code !== '200' && res.code !== 200) {
  if (res.code === '4001' || res.code === 4001) {
  MessageBox.confirm('用户名或密码错误，请重新登录', '重新登录', {
   confirmButtonText: '重新登录',
   cancelButtonText: '取消',
   type: 'warning'
  }).then(() => {
   store.dispatch('FedLogOut').then(() => {
    location.reload()// 为了重新实例化vue-router对象 避免bug
   })
  })
  }
  if (res.code === '4009' || res.code === 4009) {
  MessageBox.confirm('该用户名已存在，请重新注册！', '重新注册', {
   confirmButtonText: '重新注册',
   cancelButtonText: '取消',
   type: 'warning'
  }).then(() => {
   store.dispatch('FedLogOut').then(() => {
   location.reload()// 为了重新实例化vue-router对象 避免bug
   })
  })
  }
  return Promise.reject('error')
 } else {
  return response.data
 }
 },
 error => {
 Message({
  message: error.message,
  type: 'error',
  duration: 5 * 1000
 });
 return Promise.reject(error)
 }
)
export default service

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

紅黑樹的插入詳解及Javascript實作方法範例

js canvas實作滑動拼圖驗證碼函數

JS從非陣列物件轉數組的方法小結

############### ####

以上是透過利用vue+vuex+axios這幾種技術實現登入、註冊頁權限攔截（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！