feat: 添加接口权限

src/api/index.js

@@ -1,6 +1,6 @@
 import instance from '@/api/instance.js';
 
-const user = {
+const sign = {
   signUp(params) {
     return instance.post('/sign/signup', params);
   },
@@ -10,8 +10,15 @@ const user = {
   signOut() {
     return instance.get('/sign/signout');
   },
+
+};
+
+const user = {
   info() {
-    return instance.get('/sign/info');
+    return instance.get('/user/info');
+  },
+  list(params) {
+    return instance.get('/user/list', { params });
   },
 };
 
@@ -22,6 +29,7 @@ const log = {
 };
 
 export default {
+  sign,
   user,
   log,
 };

src/api/instance.js

@@ -1,16 +1,21 @@
 import axios from 'axios';
 import qs from 'qs';
+import { getToken } from '@/utils/util';
 
 const instance = axios.create({
-  baseURL: '/api',
+  // baseURL: '/api',
+  baseURL: 'http://localhost:8001/api',
   timeout: 60000,
   paramsSerializer(params) {
     return qs.stringify(params);
   },
 });
 
 instance.interceptors.request.use(
-  (config) => config,
+  (config) => {
+    config.headers.token = getToken();
+    return config;
+  },
   (error) => {
     console.error(error);
     return null;

src/components/HelloWorld.vue

@@ -1,40 +1,40 @@
 <template>
-  <h1>{{ msg }}</h1>
+  <div class="hello-world">
+    <div><a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Documentation</a></div>
+    <div><a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a></div>
+    <div><a href="https://element-plus.org/" target="_blank">Element Plus Documentation</a></div>
 
-  <p>
-    <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Documentation
-    </a>
-    |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
-  </p>
+    <el-button @click="signOut" type="primary">signOut</el-button>
+    <el-button @click="state.count++" type="primary">count is: {{ state.count }}</el-button>
+    <n-button @click="state.count++" type="primary">count is: {{ state.count }}</n-button>
 
-  <el-button @click="state.count++" type="primary">count is: {{ state.count }}</el-button>
-  <n-button @click="state.count++" type="primary">count is: {{ state.count }}</n-button>
-  <p>
-    Edit
-    <code>components/HelloWorld.vue</code> to test hot module replacement.
-  </p>
+    <div>打开<router-link to="/sign">Sign</router-link>页面，</div>
+    <div>打开<router-link to="/user">User</router-link>页面，</div>
+    <div>打开<router-link to="/admin">Admin</router-link>页面,如果是普通用户会被跳转到登录页面</div>
+
+    <div>
+      Edit<code>components/HelloWorld.vue</code> to test hot module replacement.
+    </div>
+  </div>
 </template>
 
 <script>
 import { reactive } from 'vue';
+import { signOut } from '@/utils/util';
 
 export default {
-  props: {
-    msg: String,
-  },
   setup() {
     const state = reactive({ count: 0 });
     return {
       state,
+      signOut,
     };
   },
 };
 </script>
 
-<style scoped>
-a {
-  color: #42b983;
-}
+<style lang="scss">
+  .hello-world {
+    text-align: center;
+  }
 </style>

src/plugins/element-plus.js

@@ -17,7 +17,6 @@ const components = [
 ];
 
 function notify(type, message, options) {
-  console.log(message, options);
   return ElNotification({
     type,
     message,

src/router/index.js

@@ -3,14 +3,15 @@ import Home from '@/views/Home.vue';
 import Sign from '@/views/Sign.vue';
 import { ROLE } from '@/constant';
 
-const USER = [ROLE.USER];
 const ADMIN = [ROLE.ADMIN];
+const ALL = [ROLE.USER, ROLE.ADMIN];
 
 const routes = [
   {
     path: '/',
     name: 'Home',
     component: Home,
+    meta: { role: ALL },
   },
   {
     path: '/sign',
@@ -23,7 +24,7 @@ const routes = [
     component() {
       return import(/* webpackChunkName: "about" */ '../views/User.vue');
     },
-    meta: { role: USER },
+    meta: { role: ALL },
   },
   {
     path: '/admin',
@@ -42,29 +43,22 @@ const router = createRouter({
 
 router.beforeEach(async (to, from, next) => {
   const userInfo = router.$user;
-
   if (to.name !== 'Sign' && !userInfo) {
-    return next({
+    next({
       name: 'Sign',
     });
   }
-
   if (userInfo) {
-    if (to.name === 'Sign') {
-      return router.push({
-        path: userInfo.role === ADMIN ? '/admin' : '/user',
-      });
-    }
     const { meta } = to;
     if (meta && meta.role) {
       if (meta.role.indexOf(userInfo.role) === -1) {
-        return router.push({
+        router.push({
           name: 'Sign',
         });
       }
     }
   }
-  return next();
+  next();
 });
 
 export default router;

src/utils/util.js

@@ -2,6 +2,22 @@ function checkRes(res) {
   return (res && res.data && res.data.code === 0);
 }
 
+function setToken(token) {
+  window.localStorage.setItem('token', token);
+}
+
+function getToken() {
+  return window.localStorage.getItem('token');
+}
+
+function signOut() {
+  window.localStorage.removeItem('token');
+  window.location.href = '';
+}
+
 export {
   checkRes,
+  setToken,
+  getToken,
+  signOut,
 };

src/views/Admin.vue

@@ -1,5 +1,30 @@
 <template>
-  <div class="about">
+  <div class="admin">
     <h1>This is an admin page</h1>
+    <div>{{users}}</div>
+    <router-link to="/">Return Home</router-link>
   </div>
 </template>
+
+<script>
+export default {
+  data() {
+    return {
+      users: [],
+    };
+  },
+  created() {
+    this.getUserList();
+  },
+  methods: {
+    async getUserList() {
+      const users = await this.$api.user.list();
+      if (this.checkRes(users)) {
+        this.users = users.data.data;
+      } else {
+        this.$error('获取用户列表失败');
+      }
+    },
+  },
+};
+</script>

src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <HelloWorld msg="helloworld"/>
+    <HelloWorld/>
   </div>
 </template>
 

src/views/Sign.vue

@@ -29,6 +29,7 @@
 
 <script>
 import { RULES } from '@/utils/rules';
+import { setToken } from '@/utils/util';
 
 const TYPE = {
   signup: 'signup',
@@ -46,7 +47,7 @@ export default {
     return {
       type: TYPE.signin,
       user: {
-        username: '',
+        username: window.localStorage.getItem('username') || '',
         password: '',
         checkPassword: '',
       },
@@ -61,17 +62,25 @@ export default {
     },
     async signIn() {
       if (await this.checkForm()) {
-        const res = await this.$api.user.signIn();
+        window.localStorage.setItem('username', this.user.username);
+        const res = await this.$api.sign.signIn({
+          username: this.user.username,
+          password: this.user.password,
+        });
         if (this.checkRes(res)) {
-          window.location.reload();
+          setToken(res.data.data.token);
+          window.location.href = '';
         } else {
           this.$error('登录失败');
         }
       }
     },
     async signUp() {
       if (await this.checkForm()) {
-        const res = await this.$api.user.signUp();
+        const res = await this.$api.sign.signUp({
+          username: this.user.username,
+          password: this.user.password,
+        });
         if (this.checkRes(res)) {
           this.toSignIn();
         } else {

src/views/User.vue

@@ -1,5 +1,17 @@
 <template>
-  <div class="about">
+  <div class="user">
     <h1>This is an user page</h1>
+    {{ $user }}
+    <router-link to="/">Return Home</router-link>
   </div>
 </template>
+
+<script>
+export default {
+  computed: {
+    $user() {
+      return this.$router.$user;
+    },
+  },
+};
+</script>